一、引言
在做网页开发的时候，字体的选择和加载可是个挺重要的事儿。咱们都希望网页能有独特的字体来提升视觉效果，可字体加载又可能会影响页面的呈现速度。这时候，CSS 的 font - display 策略就派上用场啦，它能帮咱们在字体加载和内容呈现之间找到一个合适的平衡点。
二、什么是 CSS font - display 策略
简单来说，CSS font - display 策略就是用来控制字体加载和显示方式的规则。当浏览器遇到自定义字体时，它会按照这个策略来决定在字体加载过程中怎么显示文本内容。
2.1 font - display 的取值
它有几个不同的取值，每个取值都有不同的表现。
- auto：这是默认值，浏览器会按照自己的规则来处理字体加载。一般情况下，它可能会先隐藏文本，等字体加载完成后再显示。
- block：浏览器会有一个短暂的“阻塞期”，在这个期间文本会隐藏。如果字体在阻塞期内加载完成，就正常显示；如果没加载完成，就会用系统默认字体显示，等字体加载完成后再替换。
- swap：文本会立即用系统默认字体显示，等字体加载完成后再替换成自定义字体。这样能保证用户第一时间看到文本内容。
- fallback：有一个非常短的阻塞期，在这个期间文本隐藏。如果字体在短阻塞期内加载完成，就正常显示；如果没完成，就用系统默认字体显示，并且之后不会再替换成自定义字体。
- optional：和 fallback 类似，不过浏览器可能会根据网络情况等因素决定是否加载字体。如果网络不好，可能就直接用系统默认字体了。
三、示例演示
3.1 技术栈：CSS
/* 定义自定义字体 */
@font - face {
font - family: 'MyCustomFont';
src: url('path/to/your/font.woff2') format('woff2'),
url('path/to/your/font.woff') format('woff');
font - display: swap; /* 使用 swap 策略 */
}
body {
font - family: 'MyCustomFont', sans - serif; /* 先尝试使用自定义字体，没有就用系统默认无衬线字体 */
}
在这个示例中，我们定义了一个自定义字体 MyCustomFont，并使用 font - display: swap 策略。这样，页面上的文本会先用系统默认字体显示，等 MyCustomFont 加载完成后再替换。
3.2 不同策略的对比示例
/* block 策略 */
@font - face {
font - family: 'BlockFont';
src: url('path/to/blockfont.woff2') format('woff2');
font - display: block;
}
/* swap 策略 */
@font - face {
font - family: 'SwapFont';
src: url('path/to/swapfont.woff2') format('woff2');
font - display: swap;
}
/* fallback 策略 */
@font - face {
font - family: 'FallbackFont';
src: url('path/to/fallbackfont.woff2') format('woff2');
font - display: fallback;
}
/* optional 策略 */
@font - face {
font - family: 'OptionalFont';
src: url('path/to/optionalfont.woff2') format('woff2');
font - display: optional;
}
/* 应用不同字体 */
.block - text {
font - family: 'BlockFont', sans - serif;
}
.swap - text {
font - family: 'SwapFont', sans - serif;
}
.fallback - text {
font - family: 'FallbackFont', sans - serif;
}
.optional - text {
font - family: 'OptionalFont', sans - serif;
}
在 HTML 中可以这样使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device - width, initial - scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Font Display Example</title>
</head>
<body>
<p class="block - text">This is text using block strategy.</p>
<p class="swap - text">This is text using swap strategy.</p>
<p class="fallback - text">This is text using fallback strategy.</p>
<p class="optional - text">This is text using optional strategy.</p>
</body>
</html>
通过这个示例，我们可以清楚地看到不同 font - display 策略下文本的显示效果。
四、应用场景
4.1 追求快速内容呈现
如果你的网页需要让用户尽快看到内容，比如新闻网站、博客等，那么 swap 策略就很合适。用户打开页面就能看到文本，不会因为字体加载而等待，等字体加载完成后再替换，不影响用户体验。
4.2 对字体效果要求高
如果你的网页对字体效果要求非常高，比如设计类网站、品牌官网等，那么可以考虑 block 策略。虽然在字体加载期间文本会隐藏，但一旦加载完成，就能呈现出完美的字体效果。
4.3 网络情况不稳定
当用户的网络情况不稳定时，optional 策略就很有用。浏览器会根据网络情况决定是否加载字体，如果网络不好，就直接用系统默认字体，保证页面能正常显示。
五、技术优缺点
5.1 优点
- 提升用户体验：通过合理选择
font - display策略，可以让用户更快地看到内容，减少等待时间，提升用户体验。 - 灵活性：不同的策略适用于不同的场景，开发者可以根据实际需求进行选择。
- 优化性能：避免了字体加载过程中可能出现的闪烁等问题，让页面更加流畅。
5.2 缺点
- 兼容性问题：虽然现代浏览器对
font - display支持较好，但一些旧版本的浏览器可能不支持，这可能会影响页面的显示效果。 - 字体替换可能影响布局：当字体加载完成后进行替换时，可能会导致页面布局发生变化，需要开发者进行额外的处理。
六、注意事项
6.1 兼容性处理
为了确保在不同浏览器上都能有较好的显示效果，建议使用 @supports 来检测浏览器是否支持 font - display。
@supports (font - display: swap) {
@font - face {
font - family: 'SupportedFont';
src: url('path/to/supportedfont.woff2') format('woff2');
font - display: swap;
}
}
6.2 字体文件大小
字体文件大小会影响加载速度。尽量选择合适的字体格式，如 woff2，它的压缩率更高，加载速度更快。同时，避免使用过大的字体文件。
6.3 布局调整
在使用 swap 等策略时，要注意字体替换可能会导致布局变化。可以通过设置固定的行高、宽度等方式来避免布局混乱。
七、文章总结
CSS 的 font - display 策略为我们在字体加载和内容呈现之间提供了一个很好的平衡方案。通过合理选择不同的策略，我们可以根据网页的特点和用户需求，在快速呈现内容和保证字体效果之间找到最佳的平衡点。在实际开发中，我们要考虑兼容性、字体文件大小和布局调整等问题，以确保页面在不同环境下都能有良好的显示效果。
评论