字体

一个令人难忘的字体可以成为让你的网站脱颖而出的好方法。但是，务必注意使用自定义字体的性能影响。

与预装在用户机器上的系统字体不同，自定义字体需要下载。

FOIT 与 FOUT

当用户访问网站时，浏览器会从服务器请求字体文件。然后，浏览器会使用字体文件来渲染页面上的文本。

有两种主要策略

在下载网页字体之前延迟文本显示（**FOIT** - 闪现不可见文本）。
在网页字体准备好之前使用本地安装的“备用”字体（**FOUT** - 闪现未设置样式的文本）。

两种方法都有缺点。FOIT 会阻止用户看到文本，而 FOUT 会导致令人不快的视觉体验。两者都会导致 CLS 问题。只要网页字体需要下载，这些问题就会持续存在。

字体显示

幸运的是，我们可以利用 font-display 属性来控制浏览器如何处理字体加载。这使我们能够在两种策略之间取得平衡。

我们建议尝试不同的加载策略，以及字体显示时间线的工作方式。

font-display 属性的两个最常见的值是 swap 和 fallback。

Google 字体

Google 字体是一个流行的开源库，提供超过 1500 个字体系列。

虽然它们易于使用，但它们涉及从不同域下载 CSS 文件和字体，即使使用 swap，也会导致明显的延迟和字体加载切换。

以下是发生的情况

浏览器会发现 <link href="https://fonts.googleapis.com/css2"> 标签，这会提示它请求一个 CSS 文件。
在分析文件后，它意识到需要来自 https://fonts.gstatic.com 的网页字体，从而导致另一个请求。

为了减轻这种情况，我们可以**自行托管**我们的字体。

自行托管

与其使用 Google 字体等第三方提供商，我们可以自行托管我们的字体。这意味着我们下载字体文件并从我们自己的域提供服务。

一些好处包括

提高性能
由于 Google 会跟踪字体使用情况，因此更注重隐私。
自行托管的字体可以在脱机状态下加载，这对 PWA 或连接性较差的情况很有用。

Fontsource

使用 fontsource 自行托管就像 npm 安装一样简单。它包含所有 Google 字体，以及其他开源字体，而无需自己管理文件。

他们还提供了一个 Qwik City 指南，介绍如何在项目中添加 fontsource。

手动

有时我们想自行托管 Google 字体或 fontsource 中没有包含的字体。

如果我们有 ttf 或 otf 文件，我们想将其转换为 woff 或 woff2 文件。为此，我们可以使用 Fontsquirrel 的 Webfont 生成器工具。

接下来，我们需要在 CSS 中创建一个 @font-face 规则。我们想为我们要使用的每个字体粗细和样式创建一个新规则。

@font-face {
  font-display: swap;
  font-family: "Peace Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/peace-sans.woff2") format("woff2");
}

以上是针对字体“Peace Sans”的 @font-face 规则示例，字体粗细为 400，使用相对 URL 指向我们的字体文件。然后，我们可以在 CSS 中像这样使用该字体

body {
  font-family: 'Peace Sans', sans-serif;
}

手动自行托管 Google 字体

Google Webfonts Helper 是一个工具，允许你下载优化的 Google 字体。

不幸的是，这并不包括可变字体。为了解决这个问题，你可以使用 Google Fonts API，然后在 Chrome 的 network 标签中下载优化的可变字体文件。

减小字体大小

如果我们没有使用某些字形，我们可以使用 unicode-range 属性来减小字体大小。 Glyphhanger 是一个工具，允许我们获取字体的特定子集。

一个常见的情况是只使用字体的拉丁子集。这可以减小我们的字体文件大小。

备用字体

如果你还记得前面的部分，我们提到过，当我们的自定义字体加载进来时，我们会遇到 CLS 问题。

最近，一直在努力进行“字体匹配”，或调整排版属性以减少自定义字体的 CLS 影响。让我们看看如何做到这一点。

备用字体生成器

此工具会生成具有特殊属性的系统备用字体。这是一个关于其工作原理的过度夸张的演示

您可以使用size-adjust、ascent-override和descent-override属性来调整系统回退字体以匹配自定义字体。

Fontaine

Fontaine 会自动调整上述属性以避免 CLS 问题。它们提供了一个 vite 插件，您可以在您的 vite 配置中添加它。

系统字体

性能最佳的选择是系统字体。这是因为用户已经在他们的机器上安装了字体，浏览器可以立即渲染文本。

系统字体通常被称为“字体堆栈”，它们是一组彼此足够相似的系统字体。如果第一个字体不可用，浏览器可以使用堆栈中的下一个字体。

Tailwind CSS 还为常见的系统字体提供了实用程序类。现代字体堆栈是一个示例工具，您可以使用它来测试不同的字体堆栈，包括来自社区成员的Tailwind CSS 插件。

字体 UX

不要使用`ch`单位作为主体最大宽度

建议将最大宽度设置为75ch或 75 个字符，这样用户就不必移动头部来阅读文本，而且更容易阅读。

但是，如果我们使用自定义字体，我们应该注意ch单位。这是因为ch单位基于0字符的宽度，而这在不同的字体之间可能会有所不同。

这会导致一些非常奇怪的布局偏移。我们希望使用px或rem设置最大宽度。

使用`rem`与`font-size`属性。

不同的单位都有自己的无障碍问题。我们希望使用rem与font-size属性，因为它基于根字体大小。否则，用户选择的字体大小将不被尊重。

行高建议

浏览器的默认行高不适合阅读。对于正文字体，我们希望行高约为 1.5。对于标题，我们希望行高约为 1.2。

贡献者

感谢所有帮助改进这份文档的贡献者！

字体