Astro字体后备倾斜：减少CLS-DEV365 开发者社区

ð字体后备

在此Astro字体后备帖子中，我们看到了如何使用capsize来减少字体交换引起的布局变化。我们专注于这里的香草CSS中的自托管字体，尽管您可以在其他地方应用这些技术。在详细介绍细节之前，我们将解开一些刚刚提到的术语。

字体交换

当您在网站上使用Web字体或Google字体时，将它们下载到用户设备时可能需要一点时间，尤其是在Internet连接缓慢的情况下。默认情况下，用户将一无所获，文本应该在哪里，而字体则在后台下载。为了改善用户体验，您通常需要将font-display: swap指令添加到@fontface CSS。这告诉浏览器最初使用后备字体显示文本。这可以改善用户体验，因为访问者可以在Web字体下载时开始阅读。浏览器下载后，浏览器将其换成Web字体的后备，因此页面最终将看起来像设计师想要的。

字体交换布局偏移

我们解决了一个用户体验问题，但有可能介绍另一个用户体验问题。那是因为并非所有字体都相同！当浏览器从后备转到Web字体时，通常会有一些布局变化，仅是由两个字体具有不同指标的字体而产生的。这在较窄的显示器上变得更加明显。累积布局偏移（ cls ）不是很好。如果您想在手指击中屏幕之前要敲击的按钮移动，那可能会很烦人。

减少这种字体交换布局变化的一种技巧是使用现代CSS调整后备字体的指标。这样做，后备字体看起来不会完全如应有的，但是可以大大减少甚至在字体交换时消除偏移。我们在这里使用CapSize来查看在此处这样做的技术。

ð什么是倾斜度？

Capsize is a typography tool for text layouts。从字体尺寸的定义方式来创建精确的文本布局可能会令人沮丧。 making your text height and the spacing above and below more predictable在这里有帮助。它在此使用的字体度量数据也很方便地制定我们可以对后备字体进行的现代CSS调整，因此其布局近似于Web字体。

替代品可减少font swap layout shift is Fontaine的替代方法。它具有一个Vite插件，并且能够自动更新字体面CSS（就像我们将使用倾斜度指标一样）。我们在这里使用倾覆的一些手册做一些手册，只是为了帮助解决问题和解决方案方法。

ð§±我们正在建造什么？

我们将从始于开始建立一个站点。取而代之的是，我们将跳入片段，以使用香草CS和自托管字体的基本示例。在页面下方，有一个指向完整代码的链接。您将能够使用该代码与字体互换稍微播放，并查看我们的方法的影响。

如果您是Astro中使用自托管字体的新手，请参阅Astro Self-Hosted Fonts workflow video速度快速。如果您想要更多关于字体交换和后备的背景，请参见thorough article by Katie Hempenius on Chrome Developers。

ðAstro字体后备：全球样式

我们的第一个代码段是全球样式表。这里最重要的功能是为字体系列设置和使用自定义CSS属性：

:root {
    /* ...TRUNCATED */

    --font-family: 'Open Sans', sans-serif;
}

我们将覆盖我们生成的字体后备CS中的该属性。

ð字体面CSS

这些是我们开放的sans字体所需的字体面说明。后来，这些CSS文件将导入到Astro Markup file中。

/* open-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/open-sans-v35-latin-regular.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans-v35-latin-regular.woff')
            format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/open-sans-v35-latin-700.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans-v35-latin-700.woff')
            format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

您可以使用google-webfonts-helper app下载大多数Google字体的WOFF文件（以及匹配的字体脸指令）。请注意，字体面包括font-display: swap，这很重要。

ðcapsize脚本

接下来，我在项目根目录中添加了一个打字稿独立脚本：capsize-font-fallbacks.ts。这使用节点API输出额外的CSS样式表；在香草CSS工作时方便。或者，您可以使用类似的代码作为实用程序函数来导出用于DOM元素的样式：使用CSS-IN-JS框架或vanilla-extract之类的东西时更有用。

import { createFontStack } from '@capsizecss/core';
import arial from '@capsizecss/metrics/arial';
import openSans from '@capsizecss/metrics/openSans';
import roboto from '@capsizecss/metrics/roboto';
import { writeFileSync } from 'node:fs';
import path from 'node:path';

const __dirname = path.resolve();
const outputPath = path.join(__dirname, 'src/styles/font-fallbacks.css');

const { fontFaces, fontFamily } = createFontStack([openSans, arial, roboto]);

const css = `/* This file is generated using capsize. Run `pnpm vite-node capsize-font-fallbacks.ts` to refresh. */

:root {
  --font-family: ${fontFamily}, sans-serif;
}

${fontFaces}`;

writeFileSync(outputPath, css);

倾覆工具

您需要在项目中添加两个倾斜软件包：

pnpm add -D @capsizecss/core @capsizecss/metrics

第一个软件包提供了createFontStack，我们用它来创建后备字体CSS指令和一些字体 - 面CSS：

const { fontFaces, fontFamily } = createFontStack(
  [openSans, arial, roboto]);

您可以在这里的createFontStack上添加{fontFaceFormat: 'styleObject'}作为第二个（选项）参数，以便输出更适合CSS-IN-JS样式框架。

选择后备字体

通常，您需要将Arial用作Sans-Serif字体的后备字体，而Times New Roman用于Serif。凯蒂·亨普尼乌斯（Katie Hempenius）的文章（上面提到）指出，尽管这些是桌面设备相当安全的后备，但在Android上都不可用，因此Roboto是第二个第二回缩。

您可以从@capsizecss/metrics中导入单个字体，例如2-4。然后，将它们组合成字体堆栈阵列。该代码将sans-serif添加为输出CSS中的第三个后备。

`vite-node`

您可以通过安装vite-node作为DEV依赖项来运行Astro Project中的打字稿节点脚本。要运行vite-node（安装软件包作为依赖项之后），请使用：

pnpm vite-node capsize-font-fallbacks.ts

ð产生的CSS

运行脚本应创建一个src/styles/font-fallbacks.css文件：

/* This file is generated with capsize. Run `vite-node capsize-font-fallbacks.ts` to refresh. */

:root {
  --font-family: "Open Sans", "Open Sans Fallback: Arial", "Open Sans Fallback: Roboto", sans-serif;
}

@font-face {
  font-family: 'Open Sans Fallback: Arial';
  src: local('Arial');
  ascent-override: 101.1768%;
  descent-override: 27.7323%;
  size-adjust: 105.6416%
}

@font-face {
  font-family: 'Open Sans Fallback: Roboto';
  src: local('Roboto');
  ascent-override: 101.2887%;
  descent-override: 27.763%;
  size-adjust: 105.5249%
}

第一次，您可以看到这些神秘的CSS字体调整（ascent-override，descent-override和size-adjust）！

ð€首页

最终丢失的部分是主页的客户端代码，其中包括我们提到的所有样式表。一种替代方法是将这些导入列入布局文件，所有站点页面均可访问。

---
import '~styles/fonts.css';
import '~styles/global.css';

import '~styles/font-fallbacks.css';
---

<html lang="en-GB">
    <head>
        < !-- TRUNCATED... -->
    </head>

    <body>
        <main>
            <h1>🌟 Twinkle, Twinkle, Little Star</h1>
            <p>
                Twinkle, twinkle, little star,<br />
                How I wonder what you are! <br />
                Up above the world so high, <br />
                Like a diamond in the sky.
            </p>
            < !-- TRUNCATED... -->
        </main>
    </body>
</html>

ðastro字体后备：前端

当您拥有所有工作时，请尝试评论Astro页面文件中的后备CSS导入行以查看差异。您可能需要限制网络速度才能详细查看负载。

我在这里使用了新罗马人作为sans-serif字体的后备，只是为了夸大布局变化。通常，您将使用OPT ARIAL作为安全的Sans-Serif后备。

ðð½Astro字体后备：总结

在这篇文章中，我们看到了一种实施Astro Font后备的方法。特别是，我们看到了：

为什么使用font-display: swap可以改善用户体验;
为什么您可以使用倾斜度或 fontaine 减少CLS；和
如何使用倾斜生成后备CSS。

您可以看到full code for this project in the Rodney Lab GitHub repo。希望您发现这篇文章有用！让我知道您是否决定在生产项目中使用倾斜度，或者您更喜欢Fontaine。另外，让我知道上述内容的任何可能改进。

ðð½Astro字体后备：反馈

您发现该帖子有用吗？您想看另一个主题的帖子吗？与新帖子的想法联系。另外，如果您喜欢我的写作风格，请与您的公司网站撰写一些帖子，以联系您的公司网站。请继续阅读以找到与之联系的方法，以下更远。如果您想支持与此类似的帖子，并且可以浪费几美元，欧元或磅，请consider supporting me through Buy me a Coffee。

最后，请随时在社交媒体帐户上分享所有发现有用的关注者的帖子。除了在下面留下评论外，您还可以在Twitter上通过@askRodney，Mastodon上的@rodney@toot.community与#rodney元素矩阵室取得联系。另外，请参见further ways to get in touch with Rodney Lab。我定期发布在Astro以及SEO上。另外，subscribe to the newsletter to keep up-to-date有了我们的最新项目。