高级

工作原理

Nuxt 字体会处理所有 CSS 代码，并在遇到 font-family 声明时自动执行以下操作。

1. 解析 CSS 中使用的字体。它首先在您的 public/ 目录中查找与名称匹配的字体文件，例如 Roboto.woff2、RobotoBold.ttf 等。然后，它会继续使用 Web 字体提供商，例如 google、bunny 和 fontshare。找到提供商后（在本例中可能是 Google 字体），我们继续执行下一步。
2. 为您生成并注入 @font-face 规则。我们将生成规则以将您的浏览器指向正确的源文件。它们将被注入到您使用 font-family 的相同 CSS 中。

   /* If you write something like this: */
   :root {
     font-family: Poppins;
   }
   

   /* Then Nuxt fonts will add declarations that look like this at the beginning of the CSS file: */
   @font-face {
     font-family: 'Poppins';
     src: local("Poppins"), url("/_fonts/<hash>.woff2") format(woff2);
     font-display: swap;
     unicode-range: U+0000-00FF,U+0131, /* ... */;
     font-weight: 400;
     font-style: normal;
   }
   /* ... plus more font-face declarations for other unicode ranges/weights */
   

3. 代理和缓存字体请求。我们不会使用原始源 URL（指向远程服务器），而是生成在 /_fonts 子路径下的重写规则。当您的浏览器访问时，我们会从远程服务器下载字体并将其本地缓存。
4. 创建字体回退指标。如果我们可以访问字体指标（升高、下降、行间距、字符宽度等），那么我们也可以生成一个回退 @font-face 声明。我们的想法是“变形”本地系统字体（例如 Arial 或 Times New Roman）使其尽可能接近 Web 字体的尺寸，从而减少布局偏移（详细了解 CLS）。

   :root {
     /* This will generate fallbacks for local versions of Helvetica and Arial, adjusted to match Roboto's metrics. */
     font-family: Roboto, Helvetica, Arial;
     /* If you provide a generic family (like serif or sans-serif), we will use a system font from that family. */
     font-family: Merriweather, serif;
   }
   

5. 将字体包含在构建中。当您构建项目时，我们将复制项目中使用的所有字体，因此在加载网站时无需进行任何外部请求。（任何在开发过程中尚未缓存的字体将在构建时下载。）字体文件名将被哈希，Nuxt 将使用长期缓存标头提供它们。