Sveltekit Fontaine：减少自定义字体CLS-DEV365 开发者社区

ðð½字体交换CLS

在这篇文章中，我们看到了如何使用 fontaine 使用Sveltekit 来减少累积的布局变化（ cls ）， 最高可达100％ ，使用自定义或自我托管字体时。我们首先看问题是如何出现的，然后使用Fontaine转向解决方案。如果那是你来这里的目的，那就让我们的袖子卷起！

我们在这里关注Sveltekit，并使用Fontaine解决问题。我们的解决方案依赖于Vite支持，因此，相同的方法应该与Astro一起工作。虽然，如果您正在与 Astro 一起工作，或者想知道Fontaine在引擎盖下的工作方式，请参阅最近的article on reducing Astro font swap CLS using Capsize。

ð问题：确保在WebFont加载期间保持文本可见

运行Lighthouse Web开发工具时，如果您的网站使用WebFonts或Google字体，则可能会得到建议：确保在WebFont Load中保持文本可见。这是因为在慢速连接上，浏览器加载WebFont时，文本很可能是看不见的。以某种方式使文本可见，即使在首选除外的字体中也可以改善用户体验，从而使页面看起来更快。

ð«£解决方案：设置`font-display: swap`

在Chrome开发人员网站上提供的建议，以确保字体保持可见，是使用@font-face font-display: swap指令。浏览器默认情况下将具有一些可用的字体。通常，在此列表中包括新罗马和arial的时间，尽管对于Android设备，Roboto是您的安全默认。

设置font-display: swap指令指示浏览器在不快速可用时显示后备字体，而不是webfont。然后，一旦WebFont完全下载了浏览器与WebFont的后备字体交换。通常，您将把Arial设置为Sans字体和Times New Roman for Serif的后备。然后，将Roboto作为覆盖Android设备的第二个（Serif和sans-serif）的第二个后备。

ð7新问题：字体交换引入布局偏移

我们的方法改善了用户体验，使页面负载更快。但是，它引入了副作用：布局偏移。字体具有不同的指标。对于后备字体，使用这些指标的默认值通常会导致布局变化，当浏览器用实际的WebFont替换后备时。让我们看看Fontaine如何有所帮助！

ð最终解决方案

fontaine具有通用webfonts的指标，它是从Capsize typography tooling来源的。使用现代CSS，它可以覆盖后备字体的布局。这可能会使它看起来更紧凑或伸展（取决于字体相对尺寸），而不是正常。但是，当浏览器在页面加载期间交换字体时，这种布局覆盖会导致零或很少的布局变化。

使用现代CSS，Fontaine为后备字体添加了覆盖。我们将看到如何在下一部分中进行配置。下面是Fontaine生成的代码，用于Arial和Roboto作为后备。

:root {
  /* TRUNCATED... */
  --font-family: "Overpass", "Overpass fallback";
    /* TRUNCATED... */
}
@font-face {
  font-display: swap;
  font-family: Overpass;
  font-style: normal;
  font-weight: 400;
  src: url(../../../fonts/overpass-v12-latin-regular.woff2) format("woff2");
}
@font-face {
  font-family: Overpass fallback;
  src: local("Roboto");
  size-adjust: 100.5896%;
  ascent-override: 87.7824%;
  descent-override: 38.0755%;
  line-gap-override: 0%;
}
@font-face {
  font-family: Overpass fallback;
  src: local("Arial");
  size-adjust: 100.7009%;
  ascent-override: 87.6854%;
  descent-override: 38.0334%;
  line-gap-override: 0%;
}
  /* TRUNCATED... */

在3行中，Fontaine已将Overpass fallback添加到--font-family自定义属性（最初是--font-family: "Overpass"）。除此之外，它还为Roboto和Arial添加了新的@font-face指令（行13-28）。

â！sveltekit fontaine：配置

发生时，Fontaine配置非常简单。我们假设您在项目中的自助主机字体，并且已经在您的CSS中包含了font-display: swap指令。使用Google Webfonts Helper by Mario Ranftl to get the CSS snippets for your chosen webfonts，还下载字体Woff2文件。

将fontaine软件包添加到您的Sveltekit项目：
```
pnpm add -D fontaine
```

更新您的vite.config.ts文件以使用FontaineTransforms：

import { sveltekit } from "@sveltejs/kit/vite";
import { FontaineTransform } from "fontaine";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    sveltekit(),
    FontaineTransform.vite({ fallbacks: ["Arial", "Roboto"] }),
  ],
});

我在这里选择了Arial作为后备，因为我有一个sans webfont。 Roboto是第二个后备，值得包括Android设备。

正常运行您的项目。在DEV模式下检查CSS源，或在预览模式下运行的构建站点，您应该能够找到上面概述的CSS修改。

Sveltekit Fontaine：检查您的工作

您可以通过在当地的预览模式下构建网站和在本地上的运行灯塔来检查一切。在移动设备上，差异最为明显。对于上面的基本布局，当我打开Fontaine时，我看到CL从3％降至零> 。让我知道您得到了什么改进。

ðð½SveltekitFontaine：总结

在这篇文章中，我们看到了为什么您要在Sveltekit项目中使用Fontaine，以及如何使用它。更具体地说，我们看到了：

fontaine解决了什么问题;
如何将Fontaine与Vite 使用减少CL；和
如何检查 Cls实际上减少了。

请see the full repo code on the Rodney Lab GitHub repo。我希望您发现这篇文章有用，并且可以在您自己的Svelte项目中使用代码。让我知道您是否有任何改进该职位的建议。在下面放置评论或reach out on other channels。

ðð½SveltekitFontaine：反馈

如果您发现此帖子有用，请参见下面的链接以获取本网站上的更多相关内容。我希望您从视频中学到了一件新事物。让我知道是否有任何方法可以改进它。我希望您能在自己的项目中使用代码或入门器。请务必在Twitter上分享您的作品，给我提及，以便我可以看到您的工作。最后，请务必让我知道您想看的其他简短视频的想法。请继续阅读以找到与之联系的方法，以下更远。如果您发现此帖子很有用，即使您只能负担得起，请consider supporting me through Buy me a Coffee。

。

最后，请随时在社交媒体帐户上分享所有发现有用的关注者的帖子。除了在下面留下评论外，您还可以通过Twitter和askRodney on Telegram与@askRodney取得联系。另外，请参见further ways to get in touch with Rodney Lab。我定期发布在SvelteKit以及Search Engine Optimization上，以及其他主题。另外，subscribe to the newsletter to keep up-to-date通过我们的最新项目。