CSS 自定义字体

CSS 自定义字体语法

在 CSS 中，我们可以使用 @font-face 规则来加载服务端的字体，从而使得所有用户都能正常显示该字体。

语法：

@font-face {
    font-family: 字体名称;
    src: url(文件路径);
}

说明：

在 @font-face 中，font-family 用于定义字体的名称，而 src 用于定义服务端中字体文件的路径。

src 中指定的文件路径可以是多种字体格式，比如 .ttf (TrueType Font)、.woff (Web Open Font Format)、.woff2 (Web Open Font Format 2.0) 等。

其中，现代 Web 开发的标准是优先使用 .woff2 格式，因为它的压缩率极高，加载最快。

@font-face {
    font-family: "MyFont";
    src: url("myfont.woff2") format("woff2"), /* 优先加载 WOFF2 */
         url("myfont.woff") format("woff");   /* 兼容旧浏览器 */
}

为什么使用 @font-face？

我们都知道，每个人电脑装的字体都是不太一样的。下面这句代码表示 div 元素优先使用 Arial 字体来显示，如果你的电脑没有装 Arial 字体，那就接着考虑 Verdana 字体。如果你的电脑还是没有装 Verdana 字体，那就再接着考虑 Consolas 字体……以此类推。

div {
    font-family: Arial, Verdana, Consolas;
}

如果想要使得所有用户的电脑上都能正常显示某一种字体，应该怎么做呢？此时就需要用到 @font-face 规则来实现。@font-face 规则其实很简单，它就是把服务器中的字体文件下载到本地电脑，然后让浏览器端可以显示用户电脑没有安装的字体。说白了，就是给你的电脑安装某一种字体。

CSS 自定义字体示例

接下来，我们通过一个简单的例子来讲解一下 CSS 如何使用 @font-face 规则来自定义字体的。

示例：使用 @font-face 自定义字体

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        @font-face {
            font-family: "VeraSeBd";
            /* 1. 优先引入 woff2 (体积更小，加载更快)
               2. 兼容引入 ttf (作为旧浏览器回退) 
               注意：浏览器会按顺序检测，一旦找到支持的格式，就不会下载后面的
            */
            src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.woff2") format("woff2"),
                 url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf") format("truetype");
            
            /* 3. 关键属性：避免字体加载期间文字 “隐形”，先用系统字体显示，加载完再替换 */
            font-display: swap;
        }
        
        div {
            font-family: "VeraSeBd", sans-serif;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>lvyenet</div>
</body>
</html>

页面效果如下图所示。

CSS 自定义字体类型

分析：

@font-face 的使用非常简单，只需要以下 2 步。

使用 @font-face 定义字体。
使用 font-family 使用字体。

在这个例子中，我们使用 @font-face 规则定义了一个名为 VeraSeBd 的字体（当然你命名为其他名字也是可以的），然后在 div 元素中使用了 VeraSeBd 字体。通过这种方式，我们就可以使得所有用户的浏览器都能够显示相同的字体效果了。

src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.woff2") format("woff2"),
     url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf") format("truetype");

其中，src 属性支持多个来源，中间需要使用英文逗号（,）隔开，浏览器会从前向后尝试加载。因此，我们必须把压缩率最高、性能最好的格式（如 .woff2）写在最前面，把兼容性好但体积大的格式（如 .ttf）写在后面作为备选。

为何不推荐嵌入中文字体？

在实际开发中，并不建议使用 @font-face 来实现嵌入中文字体。这是因为中文字体文件大多数都是 10 MB 以上。这么大的字体文件，会严重影响页面的加载速度，导致用户体验非常差。

不过对于英文字体来说，字体文件往往只有几十 KB，非常适合使用 @font-face。之所以中文字体文件大，而英文字体文件小，原因很简单：常用中文有几千个汉字，而英文却只有 26 个字母！