Google font display=swap 奇怪的行为答案

【问题标题】：Google font display=swap strange behaviourGoogle font display=swap 奇怪的行为
【发布时间】：2019-10-25 12:02:24
【问题描述】：

我尝试通过将这段代码注入到我的 html 代码中来使用 google font api

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Source+Serif+Pro|Suwannaphum&display=swap" rel="stylesheet">

我在加载我的网站时发现使用该字体的文本会“出现故障”。它会在短时间内显示为小，然后恢复正常。

经过大量试验，我从代码中删除了 &display=swap 部分，问题不再出现，我可以使用该字体。

为什么&display=swap 会导致故障？我直接从google api字体网站复制了代码。

【问题讨论】：

【解决方案1】：

&display=swap 设置 font-display: swap，它允许使用备用字体（在您的情况下是较小的字体），直到该字体已加载并可换入。

不使用&display=swap，您将不会遇到更改字体的问题，但是在您的网站上显示使用该字体的任何文本之前需要更长的时间。

【讨论】：