显示字体：切换

贡献 用户体验
1

你好，

我注意到使用了 Google 字体（在设置中我知道可以选择多个字体）。

为了在字体加载前提升用户体验，最好在 Google CSS 加载器中添加 &display=swap。

因此：css?family=Open+Sans:400,400i,700

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

变为：css?family=Open+Sans:400,400i,700&display=swap

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

更多信息请阅读：

附注：有些链接用省略号代替了，因为作为新手，我一次帖子中最多只能粘贴两个链接 :wink:

2 个赞
2

font-display: swap; 会影响等待字体加载时的阻塞时间和交换时间，但我们的字体是从后端包含的（我们有一个独立的 discourse-fonts gem——这样做可以避免调用 Google 而被追踪）。

因此，由于字体是在初始加载时作为 Discourse 应用程序的一部分包含的，我认为我们不会看到任何好处，因为字体并没有像我们在 CSS 中调用 Google（或其他 CDN）时那样阻塞渲染。

不过，对于任何在主题中从第三方 CDN 添加自定义字体的用户来说，使用 font-display: swap; 仍然是一个很好的建议。

6 个赞
3

嗯……在考虑性能问题时，try.discourse.org 是否具有代表性？

我看到那里加载了来自 Google 的字体，便以为这是一个全局问题。

Screen Shot 2020-11-17 at 22.42.45
Screen Shot 2020-11-17 at 22.42.45986×490 66.7 KB

1 个赞
4

啊，这就说得通了。我们在 Try 中导入了字体，因为我们的标题与 discourse.org 一致（后者使用了 Open Sans）……我们可以在那里使用 swap，甚至直接将字体包含在主题中。

在排查性能问题时可以使用 Try，但为了保险起见，或许可以启用安全模式，以确认问题是否与添加的轻微自定义设置无关。

4 个赞