在 WordPress 中移动到系统字体堆栈（如何以及为什么）

我是网络性能的忠实粉丝。 但我也不认为它应该或不得不妥协设计。 中间总是有一个很好的平衡。 早在 2017 年，我就在 GitHub 的博客上挖掘他们的字体。 它非常容易阅读。 因此，我使用 Chrome Devtools 深入研究了这些属性，发现它们使用的是系统字体堆栈。

多年来我一直在使用系统字体并且喜欢它们。 所以今天，我想向您展示如何在您的 WordPress 网站上使用系统字体堆栈。

什么是系统字体堆栈？

网站有不同类型的字体可供选择。 你几乎有四种不同的选择：

• 网络安全字体：免费且浏览器不需要下载时间，但通常看起来过时，因此使用不多。 没有人真正喜欢 Arial 或 Tahoma，是吗？ 查看网络安全字体的完整列表。
• 网络字体：看起来很漂亮，但需要通过浏览器下载。 提供免费和高级选项。 添加到您网站的整体页面权重。 但是，它们可以从缓存的 CDN 中提供。 提供者包括 Google、Adobe Fonts (TypeKit) 等。
• 在本地托管 Web 字体：提供免费和高级选项。 它仍然需要下载时间，并且可以利用缓存 CDN 上的单个 HTTP/2 连接。 现在所有主要浏览器都有单独的缓存分区，因此在本地托管它们实际上对性能更好。 您可以使用 Perfmatters 在本地托管您的 Google 字体。
• 系统字体：免费，与操作系统相匹配，看起来相当不错，而且不需要下载时间！ Weather.com、GitHub、Bootstrap、Medium、Ghost、Booking.com（阅读他们的系统字体故事）、PubMed 甚至您的 WordPress 仪表板都使用它们。 在我个人看来，系统字体在 macOS 上比在 Windows 上看起来要好一些。

系统字体并不是什么新鲜事。 事实上，Medium 在 2015 年就在使用它们。它们感觉就像你的操作系统，因为它们使用的是原生字体。 许多现代操作系统非常明智地选择字体，并且都具有非常时尚的外观和感觉。 这不像默认回到 Arial 或 Times New Roman 的网络安全字体。 相信我; 没有人愿意在网站上看到 Times New Roman。

最重要的是，系统字体就像网络安全字体一样工作，因为它们不需要浏览器的任何下载时间。 这可以帮助减少您网站上的整体页面权重。 截至 2022 年 4 月，网络字体平均占整个网站权重的 6.07% 左右。 虽然这不是很大，但请记住，您所做的每一个小优化都会增加一个快速的网站，尤其是在移动设备上。

使用系统字体有什么缺点吗？ 不！ 这就是它的美妙之处。 PageSpeed Insights 中的警告，如“确保文本在字体加载期间保持可见”甚至从未发挥作用，因为从技术上讲，没有任何内容被下载。

系统字体堆栈 CSS

使用带有 web 字体的 font-family 属性，您通常拥有主要字体和一两个备用字体。 使用系统字体，您必须包含所有不同的操作系统，因此您必须堆叠更多的字体。 这就是为什么它被称为“系统字体堆栈”。

例如，下面是 CSS 可能与 Web 字体一起出现的方式。

 font-family: "Open Sans","Helvetica Neue",sans-serif;

这是系统字体堆栈的外观。 好消息是，它们并没有全部加载。 这只是应该从操作系统加载的字体（如果可用）的顺序。

 字体系列：-apple-system、system-ui、BlinkMacSystemFont、“Segoe UI”、Helvetica、Arial、sans-serif、“Apple Color Emoji”、“Segoe UI Emoji”、“Segoe UI Symbol”

您知道您的 WordPress 仪表板使用系统字体堆栈吗？ 这是他们正在使用的。

 字体系列：-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

CSS-Tricks 也有另一种方法来使用@font-face 应用系统字体。

系统字体堆栈备忘单

您必须在此处选择所需的设置。 以下是每个操作系统附带的字体列表。 注意：这会随着时间的推移而变化，因此您可能需要在新操作系统出现时重新访问您的字体。 我将确保更新此列表。

如何实现系统字体堆栈

我在 woorkup.com 和我的所有其他网站上都使用了系统字体堆栈。 我觉得我终于找到了两全其美。 这就是我的做法。

选项 1：使用 GeneratePress WordPress 主题

想让这变得超级简单吗？ 只需转到 GeneratePress 主题，这是我在所有网站上使用的主题。 在定制器中，在排版下，您只需选择“系统堆栈”。 就是这样！

Astra 等其他注重性能的主题也可以选择使用系统字体。

选项 2：使用 CSS 添加系统字体堆栈

如果您使用的是另一个 WordPress 主题，您可以使用一些 CSS 轻松移动到系统字体堆栈。

第1步

在 WordPress 中，您需要更改font-family上的 CSS。 您可以使用 WordPress 定制器在“附加 CSS”下添加代码。

第2步

输入以下代码。 这可能因主题而异，但对于大多数人来说，以下内容应该覆盖所有内容。 我使用与 GithHub 相同的系统字体堆栈，除了我添加system-ui作为 Chrome 的较新版本支持它。 请记住，它们将按照它们在堆栈中出现的顺序使用。

 body {字体系列：-apple-system，system-ui，BlinkMacSystemFont，“Segoe UI”，Helvetica，Arial，sans-serif，“Apple Color Emoji”，“Segoe UI Emoji”，“Segoe UI Symbol”；}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji ", "Segoe UI 符号";}

根据您的主题，您可能需要为正文内容添加段落标签。 所以它会是这样的：

 body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

第 3 步

您还需要禁用从 WordPress 主题加载的任何第 3 方字体，例如 Google 字体。 这又会有所不同，因为每个开发人员包含不同的字体。 但现在许多主题都有一种简单的方法来打开或关闭 Google 字体。

如果您使用默认的 WordPress 主题之一，则可以轻松使用免费的禁用 Google 字体插件。 或者您也可以在我们的 Perfmatters 插件中禁用 Google 字体。

速度测试前后

当然，我无法抗拒。 这是速度测试之前和之后。 每个测试运行五次，取平均值。

之前的速度测试

这是之前的速度测试，当时我加载了 Google 字体。

测速后

这是使用我的系统字体堆栈后的速度测试。 如您所见，我将整个页面的重量减少了大约 60 KB，并摆脱了三个请求。 一个到 fonts.googleapis.com，然后两个下载不同字体粗细版本的 Roboto。 系统字体堆栈比使用 Google 字体快大约 6% 。

我知道很多网站使用 4-5 种不同的字体粗细或样式，有时甚至使用 2-3 种不同的 Google 字体。 所以你可能会看到比我更重要的改进。

我还将我们的 novashare.io WordPress 网站移至系统字体并取得了很好的效果； 看看下面的这个速度测试。

字体平滑

字体平滑归结为个人喜好。 当您应用抗锯齿时，您的字体会更薄更轻。 我没有在这个网站上使用它，因为我更喜欢稍厚的字体； 我觉得这感觉有点温暖。 但是你可以同时试验一下，看看你喜欢哪一个。

您可以将其添加到正文中。

 身体 {
-webkit-font-smoothing：抗锯齿；
-moz-osx-font-smoothing：灰度；
}

概括

系统字体可以很好地替代网络字体和网络安全字体。 我仍然非常喜欢我的字体的外观，现在我知道它不会给用户带来任何负担。 尽管 Google 字体可以在本地托管，但它仍然是整个页面权重的一部分。

好奇你的想法是什么？ 您是否在 WordPress 中使用过系统字体堆栈？ 如果是这样，请在下面告诉我。