有没有办法在加载时淡化谷歌字体网络字体，而不是在下载后闪烁？答案

【问题标题】：Is there a way to fade a Google Fonts web font on load instead of flashing once it's downloaded?有没有办法在加载时淡化谷歌字体网络字体，而不是在下载后闪烁？
【发布时间】：2020-02-21 15:36:15
【问题描述】：

我在我的网站上使用 Google 字体，在我的 index.html 页面中带有以下标记：

<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500&display=block" rel="stylesheet">

无论我做什么，页面的第一次加载都会导致文本的变化/出现。

我曾尝试将display 更改为block、swap 等。但无论我选择哪个，都有 FOUT 或 FOIT。

我还尝试在最终出现文本的块上使用transition: 1s linear（或类似名称）。这似乎没有什么不同。

是否有一些我可以应用的 CSS 会在字体完全加载后淡入文本？

【问题讨论】：

display 属性不适用于字体的渲染，无论哪种方式，您都应该将其更改为font-display。 developer.mozilla.org/en-US/docs/Web/CSS/@font-face/…
您可以使用“webfontloader”来处理 FOUT。看看类似的 stackoverflow 问题 - stackoverflow.com/q/48591817/6517778
@Trollsyn 我根据 Google 字体规范使用 display 属性。我的理解是，在<link> 标签中，我想使用display，但如果我在CSS 中使用@font-face，我想要font-display。
@slumbergeist 谢谢。我想这就是我想要的。

标签： html css webfonts google-fonts

【解决方案1】：

您可以尝试在link 标记中使用preload 功能。这会告诉您的浏览器在需要时立即加载文件

<link rel="preload" href="/" type="font/ttf" crossorigin="anonymous" />

在此处阅读有关preload 标签的更多信息：Source

【讨论】：

【解决方案2】：

经过多年的折腾，我想出了这个：

在你的 css 文件中添加一个类：

    .showMe{filter:opacity(1) !important; transition:filter 1720ms ease-in;}

然后在结束正文标记之前的文档末尾添加一个 javascript 标记。

包含在文件中

setTimeout(function(){
    let h1 = document.getElementsByTagName('h1')[0];
        h1.classList.add('showMe');

},88);

似乎对我有用，因为我遇到了同样的问题。可以使用 setTimeout 的时间来优化最后的数字（以毫秒为单位）。您还可以在其上添加一个过渡，以便它更平滑地淡入并添加 will-change:auto;或将改变：过滤器；但我会让你乱来，看看什么适合你。忘了提你需要添加 style="filter:opacity(0);"在您的 html 标记中的 h1 上。

另一种方法可能是使用这个javascript字体观察器https://jonsuh.com/blog/font-loading-with-font-events/，它的大小只有几kb。

至于你的帖子所暗示的纯 css，我不知道这是否可能，直到 css 发展并变得更有能力。

【讨论】：