前端js/CSS中引入字体(@font-face)

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

一般采用@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文件中：

@font-face {
  font-family: "AdobeHeitiStd-Regular";
  src: url("../../../../../../assets/font/AdobeHeitiStd-Regular.ttf");
}

.a {
  font-size: 11px;
  font-family: "AdobeHeitiStd-Regular";
}

2、多个字体引入

@font-face {
  font-family: "AdobeHeitiStd-Regular";
  src: url("../../../../../../assets/font/AdobeHeitiStd-Regular.ttf");
}
@font-face {
  font-family: "SourceHanSansCN-Bold";
  src: url("../../../../../../assets/font/SourceHanSansCN-Bold.ttf");
}

.a {
    color: #FFFFFF;
    font-family: "AdobeHeitiStd-Regular";
    font-size:12px;
    font-weight: normal;
  }

.b {
    color: #FFFFFF;
    font-family: "SourceHanSansCN-Bold";
    font-size:12px;
    font-weight: normal;
  }

二、在JavaScript中使用

以引入多个字体为例。

1、使用className = { styles.a } 

<div>
  <p className={styles.a}>总人数</p>
  <p className={styles.b}>30</p>
</div>

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

<div>
  <p style={{fontFamily: "SourceHanSansCN-Bold", fontSize: 12}}>总人数</p>
  <p style={{fontFamily: "AdobeHeitiStd-Regular", fontSize: 12}}>30</p>
</div>

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