从前，浏览器只能展示本地安装的字体。如果字体未安装，网页显示效果会大打折扣。

为了解决这个问题，CSS 引入 web 字体，允许浏览器从服务器下载字体，下载完成后再重新渲染字体。

字体文件格式

使用 web 字体前，需要了解常用的字体文件格式。

TTF 字体文件，即 TrueType 字体，是由苹果和微软在 20 世纪 80 年代末开发的字体标准。它是 macOS 和 Windows 操作系统使用最广泛的字体格式。

OTF 字体文件，即 OpenType 字体，是一种可缩放的计算机字体格式。它建立在 TrueType 基础上，是微软的注册商标。OpenType 字体目前在主要的计算机平台上广泛使用。

WOFF 字体文件，即 The Web Open Font Format 字体，是一种用于网页的字体格式，2009 年开发，如今是 W3C（万维网联盟）的推荐标准。WOFF 本质是 OpenType 或 TrueType 字体，但是经过压缩并附加额外的元数据。在带宽受限的网络中，WOFF 能更好的支持从服务器到客户端的字体传输。

WOFF 2.0 字体文件，相比于 WOFF，提供了更高的压缩效率。

SVG 字体，将 SVG 用作显示文本时的字形。SVG 1.1 规范定义了一个字体规范，允许在 SVG 文档中创建字体。

EOT 字体文件，即 Embedded OpenType Fonts 文件，是微软设计的一种用于网页的嵌入式字体，它是 OpenType 字体的紧凑形式。

不同字体格式的浏览器兼容性下图所示：

不同字体格式的浏览器兼容性，截图数据来自 w3schools.com

使用自定义字体

使用 @font-face CSS 指令定义自定义字体。使用前需要把字体文件放在服务器目录，然后定义新的字体名称，并指向字体所在位置。

以京華老宋体为例，这是一款可以免费商用的中文字体。下载字体文件后，放到和 index.html 同级的目录，重命名为 jh-song.ttf。

下载字体文件

在 @font-face 指令内，使用 font-family 定义字体名称，src 属性定义字体文件路径。

定义 web 字体

然后，像使用普通字体一样，使用自定义字体样式：

使用 web 字体

完整 HTML 代码如下：

完整的 HTML 代码

浏览器显示效果如下：

web 字体显示效果

转换字体格式

在开发者工具可以看到，上面中文字体的 ttf 文件体积高达 36.7MB。

尝试转换为 woff 格式，看看体积会有什么变化。我们在这里使用一个 Node.js 工具 ttf2woff。

ttf2woff 的自我介绍

执行命令，发现 woff 文件比 ttf 小了 11MB 左右。

转换字体文件格式

@font-face 指令的 src 属性支持多个字体格式，浏览器会根据自身支持情况，从前往后挨个匹配，最终渲染的字体是首个命中的字体。因此，一般把新字体放前面，旧字体放后面兜底。

使用多个字体文件格式

此时，浏览器会下载 .woff 文件：

浏览器自动识别下载 woff 字体

24MB 的字体依然不小，如果希望继续优化字体大小，可以使用百度前端团队出品的 fontmin 工具。它的原理是只提取用到的字符信息，重新生成新的字体文件。

Fontmin 自我介绍

Fontmin 的例子

参考资料CSS Web Fonts，@font-face，The Web Open Font Format (WOFF), Tracking the History of CSS Fonts，，by Robin Rendle, 2017-05-11京華老宋体（已更新2.0），，特里王，2024-04-07Converting TTF fonts to WOFF2 (and WOFF)，，by Benjamin Black, 2018-09-11fontello/ttf2woff, ecomefe/fontmin，

完