CSS＠font face 的使用

阅读文本大概需要 6 分钟。

在网页开发中，可以在 CSS 中设置来指定对应的字体，通常我们都是用微软雅黑。有时，如果对电脑上有的字体都不满意怎么办？我们可以通过自定义字体，自己引入字体文件，来使用它。就是做这种工作的，它可以让你在的值上输入自己定义的字体名称，你甚至还能将「微软雅黑」这个名称替换成别的字体。

CSS字体家族

在开始之前，简单介绍下 css 的字体家族，只要涉及到文字都离不开它们，它们分别是，，，，以及。

应该很熟悉，定义文字使用什么字体，常见的是微软雅黑，宋体以及英文字体 Arial。字体又分为衬线字体和无衬线字体，区别是两种字体的装饰和粗细不同，微软雅黑属于无衬线字体。为了各个浏览器的兼容性，尽量写成英文名称比较好，如

定义文字的粗细程度，也就是字重。支持的属性值有很多，如下

这里有个很值得我们注意的点，就是我们经常在使用中发现无论设置 100、200、400 都没什么效果，好像只有 normal 和 bold 两个值有用，那是因为我们平常使用的字体通常是微软雅黑，它只有和两个值，所以你设置其它的数值没什么效果，实际上它是有用的。

这个很熟悉了，定义字体的大小，你想设置多少 px 都行，或者使用其它单位 em，rem，vh 等。

定义文字的样式。有如下属性值:

一个用处不大的属性，有两个值和,设置可以让字符跟小写字母一样大小，但样式是大写字母

上面这些样式的缩写，例如可以让文字大小和行高缩写为

@font face 语法

实际上，@font face 这个名称已经很类似 css 的变量了，根据 MDN 文档，@font face 有以下几个主要属性：

: 引入字体文件的取值名称，可以是 ‘$’ 或空格，该名字将被用于 font 或 font-family 属性。

: 字体文件地址，用表示当前系统内的字体，用表示外链的字体，通常后者用得较多

: 字重，这个属性的用处在于，比如你引入了同一个字体，但是设置了不同的，可以在不同的情况采用不同的字重

: 和一样，当设置了不同的值，就可以决定在这个字体下是采用正常样式还是倾斜字体，因为让字体变斜体

: 使用特定的 unicode 字体范围

实例

HTML

CSS

可以自己运行看看效果，两段文字的字体是不同的。

总结

css 有关文字这块有许多属性，除上面提到的一些基本属性外，其实还有很多，例如控制字间距，定义文字遇到空格如何换行，还有，等等，这些属性平常见得不多，但是在一些情况下很有用。最后还有对的认识。

「Stay hungry，stay foolish.」

"关注、点赞、转发都是一种支持！"