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

CSS字体家族

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

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

    1
    2
    3
    font-family: 'Microsoft Yahei'，sans-serif;
    font-family: 'simsun';  // 宋体
    font-family: 'Arial';

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

    1
    2
    3
    4
    5
    6
    7
    8
    fonr-weight: normal;
    font-weight: bold;   // 粗体
    font-weight: lighter;   // 相对父级而言
    font-weight: bolder;   // 相对父级而言
    /* font-weight 还支持数值，分为三档 */
    font-weight: 400    // 等同于 normal，在 400 之前的数值很轻，数值越小越轻越细
    font-weight: 700    // 等同 bold，500 和 600 两个数值介于之间
    font-weight: 900    // 最大值，字体最粗

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

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

  2. font-style 定义文字的样式。有如下属性值:

    1
    2
    3
    font-style: normal;   
    font-style: italic;    // 文字使用其 font-family 对应的倾斜字体
    font-style: oblique;  // 单纯地让文字倾斜

  3. font-variant 一个用处不大的属性，有两个值normal和small-caps,设置font-variant: small-caps可以让字符跟小写字母一样大小，但样式是大写字母

  4. font 上面这些样式的缩写，例如可以让文字大小和行高缩写为font: 24px/32px 'Microsoft Yahei'

    @font face 语法

    实际上，@font face 这个名称已经很类似 css 的变量了，根据 MDN 文档，@font face 有以下几个主要属性：
  • font-family: 引入字体文件的取值名称，可以是 ‘$’ 或空格，该名字将被用于 font 或 font-family 属性。
  • src: 字体文件地址，用 local() 表示当前系统内的字体，用 url() 表示外链的字体，通常后者用得较多
  • font-weight: 字重，这个属性的用处在于，比如你引入了同一个字体，但是设置了不同的 font-weight ，可以在不同的情况采用不同的字重
  • font-style: 和 font-weight 一样，当设置了不同的值，就可以决定在这个字体下是采用正常样式还是倾斜字体，因为 font-style: italic 让字体变斜体
  • unicode-range: 使用特定的 unicode 字体范围

实例

HTML

1
2
<p class="normal">正常的微软雅黑文本</p>
<p class="test">这是一段自定义字体文本</p>

CSS

1
2
3
4
5
6
7
8
9
10
@font-face {
  font-family: "myfont";
  src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
.test{
  font-family: "myfont",serif;
}
.normal{
  font-family: "Microsoft YaHei",sans-serif;
}

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

总结

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