各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊前端性能优化中一个重要的环节：字体加载优化。字体这玩意儿，用好了能让网站颜值飙升，用不好那就是性能杀手。今天咱们就来扒一扒CSS Font Loading API、CSS Font Descriptors，以及各种字体格式（WOFF2、WOFF、TrueType）之间的爱恨情仇，看看它们在性能表现上到底谁更胜一筹。
开场白：字体，美丽与性能的矛盾体
字体就像网站的化妆品，能让网站看起来更精致、更有个性。但是，化妆品用多了也伤皮肤，字体用多了也伤性能。尤其是那些花里胡哨的自定义字体，动辄几百KB，甚至上MB，加载速度慢到让人怀疑人生。
所以，如何既能让网站美美哒，又能保证加载速度快如闪电，就成了前端工程师们孜孜不倦追求的目标。
第一幕：CSS Font Loading API，让字体加载不再傻等
在没有Font Loading API之前，浏览器加载字体的方式是比较粗暴的：发现使用了自定义字体，就直接开始下载，下载完成之后再渲染文字。这种方式的缺点显而易见：
- 阻塞渲染: 字体文件下载完成之前，文字会显示为默认字体，导致“字体闪烁”（Flash of Unstyled Text，FOUT）问题。
- 无法控制加载顺序: 浏览器会按照页面中出现的顺序加载字体，无法优先加载关键字体。
CSS Font Loading API的出现，就像给字体加载加上了一个智能调度系统，让我们可以更精细地控制字体的加载过程。
1. FontFace 接口
FontFace 接口允许我们创建一个表示字体资源的 JavaScript 对象。我们可以通过这个对象来监控字体的加载状态，并在字体加载完成后执行一些操作。
const font = new FontFace('MyCustomFont', 'url(my-custom-font.woff2)');
font.load().then(function() {
// 字体加载完成
document.fonts.add(font); // 将字体添加到文档中
document.body.style.fontFamily = 'MyCustomFont, sans-serif'; // 应用字体
}).catch(function(error) {
// 字体加载失败
console.error('字体加载失败:', error);
});这段代码做了什么呢？
new FontFace('MyCustomFont', 'url(my-custom-font.woff2)'): 创建一个FontFace对象，指定了字体名称为 "MyCustomFont"，字体文件路径为 "my-custom-font.woff2"。font.load(): 触发字体加载。.then(): 当字体加载成功时执行的回调函数。document.fonts.add(font): 将加载好的字体添加到文档中，这样才能在CSS中使用。document.body.style.fontFamily = 'MyCustomFont, sans-serif': 将字体应用到body元素上。.catch(): 当字体加载失败时执行的回调函数。
2. document.fonts 接口
document.fonts 接口提供了一些方法来管理文档中使用的字体。
document.fonts.add(font): 将字体添加到文档中。document.fonts.ready: 返回一个 Promise，当所有字体加载完成时 resolve。document.fonts.status: 返回字体加载状态 ("loading" 或 "loaded")。
document.fonts.ready.then(function() {
// 所有字体加载完成
console.log('所有字体加载完成!');
});3. 实战演练：优化字体加载体验
下面是一个更完整的例子，展示如何使用 Font Loading API 来优化字体加载体验：
<!DOCTYPE html>
<html>
<head>
<title>Font Loading API Example</title>
<style>
body {
font-family: sans-serif; /* 默认字体 */
}
.loading-text {
opacity: 0; /* 初始状态隐藏文字 */
}
.font-loaded .loading-text {
opacity: 1; /* 字体加载完成后显示文字 */
font-family: 'MyCustomFont', sans-serif;
}
</style>
</head>
<body>
<p class="loading-text">Hello, world! This text will use MyCustomFont after it's loaded.</p>
<script>
const font = new FontFace('MyCustomFont', 'url(my-custom-font.woff2)');
font.load().then(function() {
document.fonts.add(font);
document.body.classList.add('font-loaded'); // 添加类名，触发CSS动画
console.log('MyCustomFont 加载完成!');
}).catch(function(error) {
console.error('MyCustomFont 加载失败:', error);
});
</script>
</body>
</html>在这个例子中，我们使用了以下技巧：
- 默认字体: 在字体加载完成之前，使用一个安全的默认字体（
sans-serif）。 - 隐藏文字: 初始状态下，隐藏使用自定义字体的文字。
- 加载完成时显示: 字体加载完成后，添加一个类名（
font-loaded）到body元素上，然后使用 CSS 显示文字并应用自定义字体。
这样，用户在字体加载完成之前，至少能看到内容，而不是一片空白或者丑陋的默认字体。
第二幕：CSS Font Descriptors，给字体文件加个“说明书”
CSS Font Descriptors 就像字体文件的“说明书”，它告诉浏览器如何使用字体文件。通过使用 Font Descriptors，我们可以更精确地控制字体的渲染方式，从而提高性能和用户体验。
常用的 Font Descriptors 包括：
font-family: 字体的名称。font-style: 字体的样式（normal, italic, oblique）。font-weight: 字体的粗细（normal, bold, 100-900）。font-stretch: 字体的拉伸程度（normal, condensed, expanded）。unicode-range: 字体文件中包含的 Unicode 字符范围。font-display: 控制字体加载和显示行为（swap, block, fallback, optional）。
1. unicode-range，按需加载，精准打击
unicode-range 是一个非常强大的 Font Descriptor。它允许我们指定字体文件中包含的 Unicode 字符范围。这意味着，浏览器只会下载包含页面上实际使用的字符的字体文件部分，从而大大减少字体文件的大小，提高加载速度。
例如，如果你的网站只使用了中文字体中的一部分常用字，你可以使用 unicode-range 来指定只加载包含这些常用字的字体文件部分。
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2');
unicode-range: U+4E00-9FA5; /* 只包含汉字 */
}
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font-latin.woff2') format('woff2');
unicode-range: U+0020-007F; /* Basic Latin */
}在这个例子中，第一个 @font-face 规则只加载包含汉字的字体文件部分，第二个 @font-face 规则只加载包含Basic Latin字符的字体文件部分。这样，浏览器只会下载它需要的字体文件部分，从而大大减少了字体文件的大小。
2. font-display，控制字体加载行为，提升用户体验
font-display 属性控制着字体加载期间的显示行为。它有五个可选值：
swap: 字体加载之前，先显示默认字体；字体加载完成后，再切换到自定义字体。这是最常用的值，可以避免 FOUT 问题。block: 字体加载之前，隐藏文字；字体加载完成后，再显示文字。这种方式可以避免 FOUT 问题，但可能会导致“字体空白”（Flash of Invisible Text，FOIT）问题。fallback: 字体加载之前，先显示默认字体；如果在很短的时间内（通常是 100ms），字体没有加载完成，则继续显示默认字体；字体加载完成后，再切换到自定义字体。这种方式是swap和block的折衷方案。optional: 浏览器可以根据网络状况和用户偏好，决定是否加载自定义字体。如果网络状况不好，或者用户禁用了自定义字体，则浏览器会直接使用默认字体。auto: 浏览器使用默认的字体加载策略。
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2');
font-display: swap; /* 使用 swap 策略 */
}选择哪个 font-display 值取决于你的具体需求。一般来说，swap 是一个不错的选择，因为它既可以避免 FOUT 问题，又可以保证用户在字体加载完成后看到自定义字体。
第三幕：字体格式大比拼，WOFF2 才是真爱
常见的字体格式包括：
- TrueType (TTF): 最早的字体格式之一，兼容性好，但体积较大。
- OpenType (OTF): TTF 的升级版，支持更多的特性，但体积也较大。
- Web Open Font Format (WOFF): 专为 Web 设计的字体格式，体积比 TTF 和 OTF 小。
- Web Open Font Format 2 (WOFF2): WOFF 的升级版，使用 Brotli 压缩算法，体积更小，加载速度更快。
| 字体格式 | 优点 | 缺点 | 兼容性 |
|---|---|---|---|
| TTF | 兼容性好 | 体积较大 | 所有浏览器 |
| OTF | 支持更多特性 | 体积较大 | 所有浏览器 |
| WOFF | 专为 Web 设计，体积较小 | 压缩率不如 WOFF2 | 现代浏览器 |
| WOFF2 | 专为 Web 设计，体积最小，加载速度最快，Brotli压缩 | 兼容性不如 TTF、OTF，老版本浏览器不支持 | 大部分现代浏览器（IE 不支持，但Edge支持） |
从性能的角度来看，WOFF2 是最佳选择。它使用了 Brotli 压缩算法，可以大大减少字体文件的大小，从而提高加载速度。
实战演练：使用 FontForge 转换字体格式
如果你只有 TTF 或 OTF 格式的字体文件，你可以使用 FontForge 软件将其转换为 WOFF 和 WOFF2 格式。
- 下载并安装 FontForge。
- 打开 TTF 或 OTF 字体文件。
- 选择 "File" -> "Generate Fonts"。
- 在 "Generate Fonts" 对话框中，选择 WOFF 和 WOFF2 格式，然后点击 "Generate" 按钮。
第四幕：字体加载优化最佳实践
- 使用 WOFF2 格式: 尽量使用 WOFF2 格式的字体文件，以获得最佳的压缩率和加载速度。
- 使用
unicode-range: 根据实际使用的字符范围，使用unicode-range来缩小字体文件的大小。 - 使用
font-display: 选择合适的font-display值，控制字体加载期间的显示行为，提升用户体验。 - 使用 CDN: 将字体文件托管到 CDN 上，利用 CDN 的缓存和加速功能，提高加载速度。
- 字体预加载: 使用
<link rel="preload">标签预加载字体文件，让浏览器提前下载字体。 - 避免使用过多的自定义字体: 自定义字体越多，加载时间越长。尽量只使用必要的自定义字体。
- 压缩字体文件: 使用工具（例如：woff2 命令行工具）对字体文件进行压缩，进一步减小文件大小。
总结：字体优化，永无止境
字体优化是一个持续不断的过程。我们需要根据项目的具体情况，选择合适的字体格式、Font Descriptors 和加载策略，才能让网站既美观又快速。
希望今天的分享对大家有所帮助。记住，字体虽好，可不要贪杯哦！ 咱们下期再见！