是否有一种方法可以使加载的Google Fonts网络字体淡化而不是在下载后立即闪烁？

Question

我在我的网站上使用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，一旦字体完全加载，它们就会淡入文本？

Answer 1

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

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

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

Answer 2

根据沉睡的专家的建议，通过使用webfontloader加载字体，我得到了想要的行为：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
    WebFont.load({
        google: {
            families: ['Oswald:300,400,500']
        }
    });
</script>

并添加以下CSS：

body,
button {
   visibility: hidden;
   opacity: 0;
}

.wf-active body,
.wf-active button {
    transition: visibility 0s, opacity 0.367s;
    visibility: visible;
    opacity: 1;
}

现在，一旦加载字体，所有元素都会淡入淡出。