[React] -- 阿里iconfont里的字体库在React项目中怎么用？ 以阿里妈妈数黑体为例

效果展示

下载字体包

示例字体包地址：

https://www.iconfont.cn/fonts/detail

下载解压后是这样的：

这里三个文件都是这个字体，此处以.ttf文件为例。

使用步骤

1. 在/public/目录下创建文件夹fonts，并把解压后的.ttf字体文件放入该文件夹
2. 在fonts文件夹中创建字体样式文件font.css，样式文件中加入以下代码，用于引入字体文件，定义字体。

@font-face {
  font-family: Alimama_ShuHeiTi_Bold;
  src: url('./Alimama_ShuHeiTi_Bold.ttf');
}

/*如果还有别的字体，按照上面的格式，在下面可以继续添加font-face*/
@font-face {
  font-family: 字体名字;
  src: url('字体文件相对路径');
}

到这一步的结果如下：

3. 在index.html文件中引入font.css字体样式文件

<link rel="stylesheet" href="%PUBLIC_URL%/fonts/font.css" />

如图：

4. 在项目中使用字体

这里的font-family的值，就是在font.css文件中定义的font-face的值。

看效果：