在加载的页面上切换字体时无样式文本的闪烁答案

【问题标题】：Flash of unstyled text when switching fonts on a loaded page在加载的页面上切换字体时无样式文本的闪烁
【发布时间】：2019-03-28 05:55:59
【问题描述】：

我正在做一个小项目，它允许用户输入文本并为他们输入的文本随机生成不同的字体。这是一个正在进行的工作demo。

目前，我加载不同字体的方法是，当用户单击“生成”按钮时，会选择一种字体，并将其 Google 字体或 Typekit css 嵌入代码设置为我的 html 中链接的 href。

HTML：

<link id="current-font" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">

JS：

document.getElementById('current-font').href = generatedFont.src;

我遇到的问题是，有时在加载生成的字体之前会出现无样式的文本。 Typekit 字体似乎更糟。有人对如何解决这种 FOUC 案有任何建议吗？或者，如果有任何关于加载字体的更好方法的建议，我愿意。

【问题讨论】：

你能为load添加一个事件监听器并在那里应用字体吗？
我没有你描述的问题。也许我正在使用更快的互联网连接？
@Cagy79 是的，在良好的互联网连接上通常不是问题。我主要是在手机上测试时发现了这个问题
@Phix 我会调查的。我认为问题在于加载 Typekit css 文件后，它有一个 src url 来加载字体，我认为问题在于 css 中的 src url，所以我不确定如何检查是否已经已加载
看起来他们都有API，走那条路可能会更好。

【解决方案1】：

您看到 Flash 的原因是加载字体需要时间。可能是字体本身有问题。

【讨论】：

【解决方案2】：

选项 1
您可以将font-display:swap 添加到您的@font-face，它的作用是，
它确保即使尚未加载字体，它仍会使用默认系统字体显示文本，并且会尽快字体加载显示真实字体。
这实际上也是google lighthouse推荐的。

这将删除闪烁（不可见文本变为可见），尽管字体样式仍会闪烁（默认字体样式为新字体样式）。

选项 2
如果想彻底解决闪退问题，加载所有@font-faces，并将font-family附加到display:none中没有隐藏的一些元素上

然而，这对性能并不友好。

【讨论】：