# 显示字体：切换
**URL:** https://meta.discourse.org/t/display-font-swap/170390
**Category:** UX
**Created:** [2020年十一月17日 19:19 UTC](https://meta.discourse.org/t/display-font-swap/170390 "2020-11-17T19:19:10Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@pavelloz](https://meta.discourse.org/u/pavelloz)
#### Post date: [2020年十一月17日 19:19 UTC](https://meta.discourse.org/t/display-font-swap/170390/1 "2020-11-17T19:19:10Z")
你好，
我注意到使用了 Google 字体（在设置中我知道可以选择多个字体）。
为了在字体加载前提升用户体验，最好在 Google CSS 加载器中添加 `&display=swap`。
因此：css?family=Open+Sans:400,400i,700
```plaintext
@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
```plaintext
@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;
}
```
更多信息请阅读：
> **[Google Fonts is Adding font-display 🎉—zachleat.com](https://www.zachleat.com/web/google-fonts-display/)**
>
> A post by Zach Leatherman (zachleat)
附注：有些链接用省略号代替了，因为作为新手，我一次帖子中最多只能粘贴两个链接 😉
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2020年十一月17日 20:07 UTC](https://meta.discourse.org/t/display-font-swap/170390/2 "2020-11-17T20:07:58Z")
`font-display: swap;` 会影响等待字体加载时的阻塞时间和交换时间，但我们的字体是从后端包含的（我们有一个独立的 [discourse-fonts gem](https://github.com/discourse/discourse-fonts)——这样做可以避免调用 Google 而被追踪）。
因此，由于字体是在初始加载时作为 Discourse 应用程序的一部分包含的，我认为我们不会看到任何好处，因为字体并没有像我们在 CSS 中调用 Google（或其他 CDN）时那样阻塞渲染。
不过，对于任何在主题中从第三方 CDN 添加自定义字体的用户来说，使用 `font-display: swap;` 仍然是一个很好的建议。
---
### Author:  [@pavelloz](https://meta.discourse.org/u/pavelloz)
#### Post date: [2020年十一月17日 21:45 UTC](https://meta.discourse.org/t/display-font-swap/170390/3 "2020-11-17T21:45:12Z")
嗯……在考虑性能问题时，`try.discourse.org` 是否具有代表性？
我看到那里加载了来自 Google 的字体，便以为这是一个全局问题。
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2020年十一月18日 23:50 UTC](https://meta.discourse.org/t/display-font-swap/170390/4 "2020-11-18T23:50:48Z")
啊，这就说得通了。我们在 Try 中导入了字体，因为我们的标题与 [discourse.org](http://discourse.org) 一致（后者使用了 Open Sans）……我们可以在那里使用 swap，甚至直接将字体包含在主题中。
在排查性能问题时可以使用 Try，但为了保险起见，或许可以启用安全模式，以确认问题是否与添加的轻微自定义设置无关。