---
order: 1
title: 文本头像
zh-CN: 文本头像
en-US: Text Avatar
---

## zh-CN

当用户未上传头像时，系统会自动生成文本头像。规则如下：
+ 字体颜色默认为白色，公有云下字体为 Microsoft-YaHei，私有部署下为 simhei-regular
+ 纯东亚三国语言取后 2 位，带空格的名字取前 2 字的首字母，其它取前 2 字符

## en-US

When the user does not upload the avatar, the system will automatically generate the text avatar. The rules are as follows:
+ The default font color is white, Microsoft YaHei for public cloud, and simhei regular for private deployment.
+ Take the last two characters for pure East Asian languages, the first two characters for names with spaces, and the first two characters for others

````jsx
import Avatar from '../src/index.jsx';
import { Balloon  } from '@alicloudfe/components';

const { Tooltip } = Balloon;
const { TextAvatar } = Avatar;

class Demo extends React.Component {
  render() {
    return (
      <div>
        <h3>不同尺寸</h3>
        <div>
          <TextAvatar text="默认" size="xs" />
          <TextAvatar text="默认" size="small" />
          <TextAvatar text="默认" />
          <TextAvatar text="默认" size="large" />
          <TextAvatar text="默认" size="xl" />
        </div>
        <h3>结合Tooltip使用</h3>
        <div>
          <Tooltip
            trigger={<TextAvatar text="默认" />}
          >
            提示文字
          </Tooltip>
          <Tooltip
            trigger={<TextAvatar text="张三" />}
          >
            提示文字
          </Tooltip>
          <Tooltip
            trigger={<TextAvatar text="李四" />}
          >
            提示文字
          </Tooltip>
          <Tooltip
            trigger={<TextAvatar text="赵二" />}
          >
            提示文字
          </Tooltip>
          <Tooltip
            trigger={<TextAvatar text="B老" />}
          >
            提示文字
          </Tooltip>
          <Tooltip
            trigger={<TextAvatar text="天罡" />}
          >
            提示文字
          </Tooltip>
          <Tooltip
            trigger={<TextAvatar text="地煞" />}
          >
            提示文字
          </Tooltip>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);
````