网页字体终极指南：从选择到优化加载体验

字体是网页设计的灵魂之一。合适的字体能够极大地提升用户体验和品牌形象。然而，网页字体（Web Fonts）的加载和使用也带来了一些性能上的挑战，比如恼人的"无样式文本闪烁"（FOUT）或"不可见文本闪烁"（FOIT）。本文将全面探讨如何选择、使用网页字体，并重点介绍如何优化字体加载，特别是针对本地字体，以提供流畅的用户体验。

一、获取和使用网页字体

主要有两种方式获取网页字体：

字体服务（如 Google Fonts）:
- 优点: 方便快捷，由 CDN 提供，通常有不错的缓存和加载速度。
- 使用方法:
  - 访问 Google Fonts 等服务网站。
  - 选择字体和所需样式（字重、斜体等）。
  - 获取嵌入代码：
    - <link> 标签 (推荐): 将提供的 <link> 代码复制到 HTML 文件的 <head> 部分。这是最常见的方式。
    html 复制代码
```
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
```
    - @import: 将 @import 规则复制到 CSS 文件的顶部或 <style> 标签内。
    css 复制代码
```
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body { /* ... */ }
```
  - 在 CSS 中通过 font-family 应用字体：
  css 复制代码
```
body {
  font-family: 'Roboto', sans-serif; /* 'Roboto' 是你选择的字体名 */
}
```
- 理解 preconnect 链接 (Google Fonts 示例中的前两行):
  html 复制代码
```
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
```
  - rel="preconnect" 是什么？ 它是一个"资源提示"，告诉浏览器："我稍后会需要从 href 指定的域名下载资源，请你现在就提前建立好连接。" 建立连接包括 DNS 查询、TCP 握手和 TLS 协商（对于 HTTPS），这些步骤都需要时间。
  - 为什么要预连接这两个域名？
    - https://fonts.googleapis.com: 浏览器首先从这里下载包含 @font-face 规则的 CSS 文件。预连接可以加速获取这个 CSS。
    - https://fonts.gstatic.com: 实际的字体文件 （如 .woff2）存储在这里。在解析完 CSS 后，浏览器需要从这里下载字体文件。预连接可以加速字体文件的下载。
  - crossorigin 属性: 字体文件通常通过 CORS 请求。当预连接一个需要 CORS 的源（如此处的 fonts.gstatic.com）时，必须添加 crossorigin 属性，以确保浏览器正确处理安全策略并建立连接。
  - 好处: 通过提前完成连接建立的耗时步骤，preconnect 可以显著减少后续资源（CSS 和字体文件）的加载延迟，提升页面性能。
本地字体 (Self-hosting):
- 优点: 完全控制字体文件，不受第三方服务影响，可能在某些网络环境下更快。
- 使用方法: 需要使用 CSS 的 @font-face 规则。我们将在后面详细讨论。

二、理解字体加载问题：FOUT 与 FOIT

当浏览器渲染页面时，如果 CSS 指定了某个网页字体，但该字体文件尚未下载完成，浏览器会面临一个选择：

FOUT (Flash of Unstyled Text): 先用备用字体（如 sans-serif）显示文本，等自定义字体加载完毕后再切换。这会导致文本样式短暂变化，产生"闪烁"。
FOIT (Flash of Invisible Text): 在自定义字体加载期间，完全不显示文本（文本是"隐形"的），加载完成后再显示。这可能导致用户在一段时间内看不到内容。

这两种情况都会影响用户体验，尤其是 FOUT 造成的视觉跳动感。

三、优化本地字体加载体验

对于本地托管的字体，我们有多种策略来减少或消除 FOUT/FOIT：

核心武器：font-display 属性 在 @font-face 规则中添加 font-display 属性，可以控制字体加载期间的渲染行为。
css 复制代码
```
@font-face {
  font-family: 'Roboto';
  src: url('../assets/fonts/Roboto-Regular.woff2') format('woff2'),
       url('../assets/fonts/Roboto-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 控制加载行为 */
}
```
常用值：
- swap: 立即显示备用字体，加载后切换（导致 FOUT，但内容立即可见）。常用推荐。
- fallback: 短暂（约 100ms）不显示文本，然后显示备用字体。如果在后续几秒内字体加载完成则切换，否则一直使用备用字体。是 swap 的折中。
- optional: 短暂（约 100ms）不显示文本，如果字体没立刻加载好，就一直用备用字体。适合非关键或装饰性字体。
- block: 短暂（约 3s）不显示文本 (FOIT)，等待字体加载。加载完显示自定义字体，超时则显示备用字体（后续加载完仍可能切换）。
预加载关键字体 (<link rel="preload">) 提示浏览器尽早开始下载重要的字体文件，提高它们在 CSS 需要时已准备好的概率。
html 复制代码
```
<head>
  <link rel="preload" href="/assets/fonts/Roboto-Regular.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/assets/fonts/Roboto-Bold.woff2" as="font" type="font/woff2" crossorigin>
  
</head>
```
- as="font": 告知浏览器资源类型。
- type: 指定字体 MIME 类型。
- crossorigin: 即使同源也建议加上。
使用最高效的字体格式 (WOFF2) WOFF2 提供最佳压缩率，文件体积最小，下载最快。在 @font-face 的 src 中优先声明 woff2。
css 复制代码
```
src: url('font.woff2') format('woff2'), /* 优先 */
     url('font.woff') format('woff');
```
字体子集化 (Subsetting) 如果你的字体文件包含大量你网站并不使用的字符（例如多种语言字符），可以使用工具（如 glyphhanger 或在线服务）创建只包含所需字符的子集文件，从而大大减小文件大小。(glyphhanger)字体子集化详解
选择匹配度高的备用字体 在 font-family 声明中，选择一个视觉上（字重、字宽、x-height 等）与你的自定义字体接近的系统备用字体。这样即使发生 swap，视觉跳动也会小很多。
css 复制代码
```
body {
  font-family: 'YourCustomFont', Arial, sans-serif; /* Arial 作为备用 */
}
```

四、使用 `@font-face` 实现本地字体

这是在 CSS 中定义如何加载和使用本地字体文件的核心规则：

css 复制代码

/* src/css/main.css */

/* 定义 Roboto Regular */
@font-face {
  font-family: 'Roboto'; /* 字体族名称 */
  src: url('../assets/fonts/Roboto-Regular.woff2') format('woff2'),
       url('../assets/fonts/Roboto-Regular.woff') format('woff');
  font-weight: 400;  /* 此文件对应的字重 */
  font-style: normal; /* 此文件对应的样式 */
  font-display: swap;
}

/* 定义 Roboto Bold */
@font-face {
  font-family: 'Roboto'; /* 同样是 Roboto 字体族 */
  src: url('../assets/fonts/Roboto-Bold.woff2') format('woff2'),
       url('../assets/fonts/Roboto-Bold.woff') format('woff');
  font-weight: 700; /* 此文件对应的字重是 700 (Bold) */
  font-style: normal;
  font-display: swap;
}

/* 在 CSS 规则中使用 */
body {
  font-family: 'Roboto', sans-serif; /* 使用 Roboto 字体族 */
  font-weight: 400; /* 默认使用常规体 */
}

h1 {
  font-weight: 700; /* 浏览器会自动匹配上面定义的 Bold 字体文件 */
}

关键点:

font-family: 为同一字体家族的不同变体（如不同字重）使用相同的名称。
src: 提供字体文件的路径（注意相对路径或绝对路径的正确性）和格式 (format)。优先使用 woff2。
font-weight / font-style: 精确指定该 @font-face 规则对应字体家族中的哪个具体变体。
应用: 在 CSS 规则中，只需指定 font-family，然后通过 font-weight 和 font-style 来让浏览器自动选择匹配的 @font-face 规则及其对应的字体文件。

五、预加载 CSS 样式表

有时，为了进一步优化，你可能想预加载 CSS 文件本身。不能在同一个 <link> 标签上同时设置 rel="preload" 和 rel="stylesheet"。你需要两个标签：

html 复制代码

<head>
  <!-- 1. 提示浏览器预加载 CSS 文件，但不应用它 -->
  <link rel="preload" href="path/to/styles.css" as="style">

  <!-- 2. 正常链接并应用样式表 -->
  <link rel="stylesheet" href="path/to/styles.css">

  <!-- 其他 head 内容 -->
</head>

这样，浏览器会提前下载 CSS，当遇到 rel="stylesheet" 时，可以更快地应用样式。

总结与最佳实践

优先选择 WOFF2 格式以减小文件大小。
使用 @font-face 定义本地字体，为同一家族使用相同 font-family 名称，用 font-weight/font-style 区分变体。
在 @font-face 中使用 font-display (如 swap) 来控制加载行为，避免 FOIT 并改善 FOUT。
使用 <link rel="preload" as="font"> 预加载关键的字体文件。
使用 <link rel="preconnect"> 提前建立与字体服务域名的连接（如果使用 Google Fonts 等服务）。
如果字体文件过大且只使用部分字符，考虑 字体子集化。
选择视觉匹配度高的 备用字体。
如果需要，可以使用 <link rel="preload" as="style"> 结合 <link rel="stylesheet"> 来预加载 CSS。

通过结合运用这些策略，你可以在享受精美字体的同时，最大限度地减少它们对页面加载性能和用户视觉体验的负面影响，实现美观与性能的平衡。

网页字体终极指南：从选择到优化加载体验