前端 - 前端项目引入外部字体

最近前端小朋友又遇到了一个问题，就是很多时候UI设计师设计出来的效果图都包含一些特殊字体，而众所周知，显示字体的前提条件是安装字体，可我们怎么能保证用户每个人本地都安装了我们需要的字体呢？

答案是把字体文件放到前端项目中。我以当前遇到的字体为例说明一下步骤。

注意：我们因为是写Demo，所以不需要注意版权问题。在实际开发中一定要注意字体商用授权问题，不然会被告。

首先下载字体文件，我是在这个网站下载的：

https://www.fontke.com/font/list/2147/

然后把下载到的ttf文件放到项目中：

 之后找到你的全局css文件，加入如下代码：

/* 自定义字体引入 */
@font-face {
  font-family: DS-Digital-Bold;
  src: url(fonts/DS-Digital-Bold.ttf) format("truetype");
}

上述代码中我改动了两处，

一处是下载下来的ttf文件名中包含空格，我把空格改成了连接线“-”。

另一处就是src的字体文件引用路径，这个路径需要根据你自己放文件的地址自行修改。

到这里这个字体就已经引入到你的前端项目当中了，在之后的代码里就可以用如下代码来使用新引入的字体了：

font-family: DS-Digital-Bold, serif;

在这里又引出一个知识点 ，就是font-family最后一个属性serif。

Serif的意思是，在字的笔划开始及结束的地方有额外的装饰，而且笔划的粗细会因直横的不同而有不同。

相反的，Sans Serif则没有这些额外的装饰，笔划粗细大致差不多。如下图：

 最后添加一个这个的意思就是，如果自定义字体失效的话，就使用系统默认的serif字体。