CSS @font-face 规则

CSS @font-face 语法

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

语法：

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

说明：

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

为什么使用 @font-face？

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

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

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

CSS @font-face 摘要

属于	CSS 自定义字体
使用频率	中
是否继承	否
默认值	无
兼容性	查看
官方文档	查看
MDN	查看

CSS @font-face 示例

接下来，我们通过一个简单的例子来讲解一下 CSS @font-face 属性是如何使用的。

示例：@font-face 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        @font-face {
            font-family: "VeraSeBd";
            src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
        }
        div {
            font-family: "VeraSeBd";
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>lvyenet</div>
</body>
</html>

页面效果如下图所示。

@font-face 示例

分析：

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

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

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

注意: 并不建议使用 @font-face 来实现嵌入中文字体。这是因为中文字体文件大多数有几 MB 甚至十几 MB。这么大的字体文件，会严重影响页面的加载速度，导致用户体验非常差。不过对于英文字体来说，字体文件往往只有几十 KB，非常适合使用 @font-face。之所以中文字体文件大，而英文字体文件小，原因很简单：常用中文有几千个汉字，而英文却只有 26 个字母！