前端设计有时候会用到系统没有的字体比如说艺术字，这个时候需要自己引入，从而达到更好的视觉效果。

一般采用@font-face规则进行字体的引入。CSS3 @font-face 规则https://www.runoob.com/cssref/css3-pr-font-face-rule.html

以下是详细步骤：

一、在CSS引入字体；

首先要有字体包（找美工要或者网页下载都可以），将其放置在项目的font文件夹下面，然后就可以进行下一步。

注意：

（1）经过尝试，有的项目仅支持 ' .ttf ' 类型的字体包。

（2）如果文件类型不是' .ttf ' ，推荐使用在线转字体包格式的工具。Convertio — 文件转换器。

1、单个字体引入

 在js对应的less/CSS文件中：

2、多个字体引入

二、在JavaScript中使用

以引入多个字体为例。

1、使用className = { styles.a } 

总人数

30

2、直接使用style = {{ fontFamily：AdobeHeiTiStd-Regular }} 

感谢：CSS3中引入多种自定义字体（font-face）_穆雄雄的博客-CSDN博客