一份关于使用 CSS @font-face 加载自定义字体的综合指南，包含提升网站性能和改善全球用户体验的优化技巧。
CSS Font Face：自定义字体加载与全球化网页设计优化策略
字体排印在网站设计中扮演着至关重要的角色，它塑造用户体验并传达您的品牌身份。CSS 中的 @font-face 规则让开发者能够将自定义字体直接嵌入到网站中，从而更好地控制文本的视觉呈现，并实现更独特、更具吸引力的用户体验。然而，不当的实现可能会导致性能问题，影响网站加载时间，并对用户满意度产生负面影响，特别是对于那些网络连接较慢地区的用户。
本综合指南将深入探讨 @font-face 的复杂性，涵盖自定义字体加载的最佳实践和优化策略，以确保为全球用户提供无缝、高性能的体验。我们将深入研究各种字体格式、优化技术和高级功能，帮助您掌握网页字体排印的艺术。
理解 @font-face 规则
@font-face 规则是一项强大的 CSS at-rule，它允许您指定要下载并在网站上使用的自定义字体文件。它基本上弥合了有限的系统字体与广阔的自定义字体排印世界之间的差距。
以下是基本语法：
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
让我们来分解一下各个部分：
font-family: 此属性定义了您将在 CSS 规则中引用该自定义字体的名称。请选择一个描述性强且唯一的名称。src: 此属性指定字体文件的位置。您可以提供多个来源，让浏览器根据其能力选择最佳格式。format()函数指明了每个文件的字体格式。font-weight: 此属性定义字体的粗细（boldness）。常见值包括normal、bold、lighter、bolder以及数值如100、400、700等。font-style: 此属性定义字体的样式（例如normal、italic、oblique）。
定义后，您可以在 CSS 规则中像这样使用自定义字体：
body {
font-family: 'MyCustomFont', sans-serif;
}
这会将 'MyCustomFont' 应用于您网站的整个 body。sans-serif 是一个备用字体，在自定义字体加载失败时使用。
选择正确的字体格式：全球化视角
不同的浏览器支持不同的字体格式。为确保广泛的兼容性，提供多种格式的字体至关重要。以下是常见字体格式及其浏览器支持的细分：
- WOFF2 (Web Open Font Format 2)：最现代且强烈推荐的格式，提供卓越的压缩和性能。所有现代浏览器都支持。
- WOFF (Web Open Font Format)：一种广泛支持的格式，提供良好的压缩。对于旧版浏览器仍然适用。
- EOT (Embedded Open Type)：专为 Internet Explorer 设计。除非您绝对需要支持非常旧版本的 IE，否则通常不再需要。
- TTF (TrueType Font) / OTF (OpenType Font)：较旧的格式，通常文件体积较大，且未针对网页使用进行优化。尽可能避免直接使用这些格式。
- SVG 字体：一种较旧的格式，由于浏览器支持和其他限制，如今已不常用。
建议： 使用 WOFF2 作为您的主要格式，并提供 WOFF 作为旧版浏览器的备用选项。仅在需要支持非常旧版本的 Internet Explorer 时才考虑使用 EOT。
以下是在 @font-face 规则中提供多种字体格式的示例：
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff'),
url('mycustomfont.eot') format('embedded-opentype'); /* For older IE */
font-weight: normal;
font-style: normal;
}
字体加载策略：为速度和用户体验而优化
您加载字体的方式会显著影响网站的性能。以下是您可以采用的几种字体加载策略：
1. 基本字体加载（默认行为）
默认情况下，浏览器通常会阻塞文本的渲染，直到字体下载完成。这可能导致感知的性能瓶颈，用户会在短时间内看到白屏或不可见的文本（通常称为“不可见文本闪烁”或 FOIT）。
虽然实现简单，但通常不建议使用此方法以获得最佳用户体验。
2. 使用 font-display 属性
font-display 属性为您提供了更多关于如何加载和显示字体的控制权。它允许您自定义字体加载过程中的行为，为用户提供更平滑的体验。这是大多数情况下推荐的方法。
以下是 font-display 的可能值：
auto：浏览器使用其默认的字体加载策略（通常是 FOIT）。block：为字体提供一个短暂的阻塞期和一个无限的交换期。浏览器最初隐藏文本，然后在字体加载后显示它。如果字体在短时间内（通常为3秒）未加载，则显示备用字体。swap：为字体提供一个零阻塞期和一个无限的交换期。浏览器立即使用备用字体显示文本。一旦自定义字体加载完成，文本就会切换为自定义字体。这避免了 FOIT，但可能导致“无样式文本闪烁”（FOUT）。fallback：为字体提供一个非常短的阻塞期和一个短暂的交换期。这是block和swap之间的折衷方案。浏览器在极短的时间内隐藏文本，如果自定义字体未加载，则切换到备用字体。它会在短时间内继续交换字体，之后将停止并仅使用备用字体。optional：为字体提供一个极短的阻塞期，且没有交换期。适用于对页面初始渲染不关键的字体（例如，用于非必要 UI 元素的字体）。
建议：
- 对于大多数场景，
swap在感知性能和视觉稳定性之间提供了最佳平衡。即使用户最初看到的是备用字体样式，他们也能立即看到文本。 - 如果您想最小化 FOUT 但仍优先考虑自定义字体，请使用
fallback。 - 对于非关键字体，请使用
optional，以防止不必要地阻塞页面渲染。
使用 font-display: swap 的示例：
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
3. 预加载字体
预加载字体可以通过指示浏览器尽早下载字体文件来提高性能。这可以减少与字体加载相关的延迟，从而带来更快的感知加载时间。
在 HTML 文档的 <head> 中使用 <link rel="preload"> 标签来预加载字体：
<link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
说明：
rel="preload"：指定应预加载该资源。href：指定字体文件的 URL。as="font"：指定正在预加载的资源类型（在本例中为字体）。type="font/woff2"：指定字体文件的 MIME 类型。crossorigin：如果字体是从不同源（例如 CDN）加载的，则需要此属性。
注意： 预加载过多资源可能会对性能产生负面影响。仅预加载对页面初始渲染至关重要的字体。
4. 字体加载 API（高级）
字体加载 API 提供了更精细的字体加载控制。它允许您检测字体何时加载、跟踪加载进度以及处理错误。这对于实现更复杂的字体加载策略非常有用。
示例 (JavaScript)：
document.fonts.load('1em MyCustomFont').then(function() {
// Font has loaded successfully
console.log('MyCustomFont loaded!');
});
字体加载 API 比 font-display 属性使用起来更复杂，但它为高级用例提供了更大的灵活性。
优化字体文件：减小体积并提升性能
优化您的字体文件对于提高网站性能和减少加载时间至关重要。以下是您可以使用的几种技术：
1. 字体子集化
大多数字体包含大量字形（字符），其中许多可能在您的网站上并未使用。字体子集化涉及从字体文件中删除未使用的字形，从而显著减小其体积。在支持多种语言时，这一点尤其重要，因为字体可能包含在特定地区未使用的字符的字形。
优点：
- 更小的字体文件体积
- 更快的下载时间
- 提升的网站性能
字体子集化工具：
- FontForge (开源)：一款功能强大的桌面字体编辑器，允许您手动对字体进行子集化。
- Glyphhanger (命令行)：一个命令行工具，可识别未使用的字形并创建子集。
- 在线字体子集化工具：有多种在线工具可用于字体子集化，例如 Font Squirrel 的 Webfont Generator。
Unicode-range
对于多语言网站，可以使用 unicode-range CSS 描述符来指定字体应覆盖的 Unicode 字符范围。这使得浏览器能够仅下载字体的必要部分，从而提高性能。在处理具有庞大字符集的语言（如中文、日文和韩文，即 CJK）时，这一点尤其有用。
示例：
@font-face {
font-family: 'NotoSansCJK';
src: url('NotoSansCJK-Regular.woff2') format('woff2');
unicode-range: U+4E00-9FFF, /* Common CJK Unified Ideographs */
U+3040-309F, /* Hiragana */
U+30A0-30FF; /* Katakana */
font-weight: normal;
font-style: normal;
}
2. 压缩
确保您的字体文件使用 Gzip 或 Brotli 进行了适当压缩。大多数 Web 服务器都支持这些压缩算法，它们可以在传输过程中显著减小字体文件的体积。
优点：
- 传输过程中文件体积更小
- 更快的下载时间
3. 优化 SVG 字体
如果您正在使用 SVG 字体（虽然通常不推荐），请使用 SVGO (SVG Optimizer) 等工具优化 SVG 文件，以删除不必要的元数据并减小文件体积。
4. 可变字体
可变字体是一项相对较新的字体技术，它允许单个字体文件包含字体的多种变体，例如不同的字重、宽度和样式。与为每个变体使用单独的字体文件相比，这可以显著减小总体文件体积。
优点：
- 与使用多种变体的传统字体格式相比，文件体积更小
- 更大的设计灵活性
5. 缓存
配置您的 Web 服务器以正确缓存字体文件。这允许浏览器在本地存储字体文件，减少在后续访问中重复下载它们的需求。
优点：
- 回头客的加载时间更快
- 减轻服务器负载
无障碍性注意事项
在使用自定义字体时，必须考虑无障碍性，以确保您的网站对每个人都可用，包括残障人士。
1. 足够的对比度
确保文本颜色与背景颜色之间有足够的对比度，以符合 WCAG（Web 内容无障碍指南）标准。使用对比度检查工具来验证对比度是否足够。
2. 可读的字号
使用足够大的字号以便于阅读，特别是对于有视觉障碍的用户。避免使用过小的字号。
3. 字体粗细
选择易于阅读的字体粗细。避免使用过细或过浅的字体，因为它们可能对某些用户来说难以阅读。
4. 备用字体
在您的 CSS 规则中提供适当的备用字体，以确保即使自定义字体加载失败，文本仍然可读。选择与自定义字体在风格和外观上相似的备用字体。
5. 文本缩放
确保用户可以使用浏览器缩放或其他无障碍工具轻松调整您网站上的文本大小。避免为字号使用固定大小的单位（例如，像素）。应使用相对单位（例如，em、rem）。
6. 语言属性
在 <html> 标签上正确设置 lang 属性，以指明页面的语言。这有助于屏幕阅读器和其他辅助技术正确地渲染文本。
示例：
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<p>This is some text in English.</p>
</body>
</html>
跨浏览器兼容性
确保您的自定义字体与各种浏览器兼容。在不同的浏览器和设备上测试您的网站，以识别任何兼容性问题。使用 BrowserStack 或 Sauce Labs 等工具在各种浏览器和操作系统上测试您的网站。
考虑使用 CSS 重置样式表（例如，Normalize.css）来统一不同浏览器之间的默认样式。
要避免的常见陷阱
- 使用过多的自定义字体： 使用过多的自定义字体可能会对性能产生负面影响，并造成混乱的视觉体验。将您网站上使用的自定义字体数量限制在最多两到三种。
- 使用大体积的字体文件： 大体积的字体文件会显著增加加载时间。使用上述技术优化您的字体文件。
- 未能提供备用字体： 如果自定义字体加载失败，未能提供备用字体可能导致文本不可见。
- 忽略无障碍性考虑： 忽略无障碍性考虑可能会使您的网站对残障人士无法使用。
- 未在不同浏览器上测试： 未在不同浏览器上测试可能导致兼容性问题。
- 直接从设计师网站或其他不可信来源盗链字体文件： 仅从您自己的网站、CDN 或信誉良好的字体服务托管字体。
全球化网页字体排印的最佳实践
为全球用户设计网站时，考虑以下网页字体排印的最佳实践非常重要：
- 选择支持多种语言的字体： 选择包含您打算在网站上支持的语言字形的字体。
- 为不同语言使用合适的字号： 适用于一种语言的字号可能不适用于另一种语言。根据需要调整字号以确保在不同语言中的可读性。
- 考虑行高和字间距： 行高和字间距会影响可读性，特别是对于具有复杂字符集的语言。根据需要调整这些值以优化可读性。
- 使用适当的文本对齐方式： 合适的文本对齐方式可能因语言而异。例如，从左到右的语言通常使用左对齐，而从右到左的语言通常使用右对齐。
- 用不同语言测试您的网站： 用不同语言测试您的网站，以确保字体排印看起来正确且易于阅读。
示例：使用具有全球字符支持的字体
考虑使用像 Noto Sans 这样的字体，它旨在支持广泛的语言和文字。谷歌提供 Noto Sans 及其许多变体（Noto Sans CJK、Noto Sans Arabic 等）作为免费的网络字体。
结论
掌握 CSS @font-face 并实施有效的字体加载和优化策略，对于为全球用户创建高性能且视觉上吸引人的网站至关重要。通过理解字体格式、加载技术和优化方法的细微差别，您可以提供无缝且引人入胜的用户体验，超越地理边界和文化差异。
通过遵循本指南中概述的最佳实践，您可以确保您网站的字体排印能够增强其整体设计，提高其性能，并为所有用户提供无障碍的体验，无论他们身在何处或使用何种设备。