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

为了解决这个问题，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 字体的紧凑形式。

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

使用自定义字体

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

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

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

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

完整 HTML 代码如下：

浏览器显示效果如下：

转换字体格式

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

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

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

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

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

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

参考资料

• CSS Web Fonts，https://www.w3schools.com/css/css3_fonts.asp
• @font-face，https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
• The Web Open Font Format (WOFF), https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/WOFF
• Tracking the History of CSS Fonts，https://css-tricks.com/tracing-history-css-fonts/，by Robin Rendle, 2017-05-11
• 京華老宋体（已更新2.0），https://zhuanlan.zhihu.com/p/637491623，特里王，2024-04-07
• Converting TTF fonts to WOFF2 (and WOFF)，https://dev.to/benjaminblack/converting-ttf-fonts-to-woff2-and-woff-3f5b，by Benjamin Black, 2018-09-11
• fontello/ttf2woff, https://github.com/fontello/ttf2woff
• ecomefe/fontmin，https://github.com/ecomfe/fontmin

完