平常开发中，我们可能感受不到字体的存在，因为都是使用的系统默认字体，比如微软雅黑。在客户端，用户也不需要下载字体，因为都是在电脑中已经存在的。

但如果我们想在网站通篇使用特殊字体呢？让我们的网站变得与众不同。

这里首先要注意，如果使用特殊字体，用户是需要先把字体下载下来的，所以一定要注意字体文件的大小。

一般字体文件在2M到十几M之间，我们尽量选择字体文件小的字体，降低用户的下载时间，不过第一次下载后字体就会缓存起来，用户再进入网站字体就不需要再次下载了。

 

这里以pop字体为例，进入页面下载任意一款字体，比如二字元小盖丁：

 

点击下载我们得到字体文件：

 

 

名字太长改一下，改成：gaiding.ttf，放入assets/fonts目录下：

assets/fonts/gaiding.ttf

在assets/css目录下创建font.css：

assets/css/font.css

在font.css中贴入以下内容：

@font-face {
font-family: 'gaiding';
src: url('../fonts/gaiding.ttf') format('truetype');
}

如果想全站使用这个字体，设置一下body的样式：

body {
font-family: 'gaiding','微软雅黑', '思源黑体', '黑体', '宋体';
}

如果只想在个别地方使用该字体，只需要把font-family:'gaiding';加上就行了。

 

 这个时候就要问，如果我只是少量字体使用了该字体，那么引入整个字体文件是不是就浪费了？

对了，这个时候就有一个概念，叫字体子集化，感兴趣的同学可以百度一下，这里就不细说了，貌似这是后端同学的工作？