淡入淡出时无样式内容的闪烁

Question

我想不出一种方法来防止在本应使用 Google 字体中的字体设置样式的文本淡入淡出时出现无样式内容。

看起来 fonts.googleapis.com 在页面加载时加载，但直到文本应该淡入时 fonts.gstatic.com 才会加载，这会导致短暂且难看的闪烁Times New Roman 中的文本或任何默认字体，然后才正确设置样式。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">

    <!-- Static CSS -->
    <link rel='stylesheet' type='text/css' href="main.css"/>
</head>

<body>
    <div>
        <button id="startButton">Start</button>
    </div>

    <div id="textDiv">
        <p id="textContents"></p>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>

    <!-- Static JavaScript -->
    <script src="main.js"></script>
</body>

CSS

#textDiv {
    font-size: 40px;
    font-family: 'Quicksand';
}

Javascript

var textDiv = $('#textDiv');
var text = $('#textContents');
var button = $('#startButton');

// handle click and add text
button.bind("click", function() {
    textDiv.hide();
    text.html("<p>Hello</p>");
    textDiv.fadeIn();
})

https://jsfiddle.net/eshapiro42/xmf23uqw/15/

如果您能帮助我们解决如何防止这种情况，我们将不胜感激！

Answer 1

当您引用实际字体时，您可以 preload 字体。您在此处引用的是一个样式表，它使用 Quicksand.

的不同变体将 @font-face 添加到您的文档中

解决方法是将样式表 link 粘贴到您的浏览器中并将直接 link 抓取到字体中，然后将其作为参考加载到您的 html 文档中有了这个：

<link rel="preload" href="ttps://fonts.gstatic.com/s/quicksand/v15/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-xDwxUD2GFw.woff" as="font" crossorigin>

Answer 2

在 CSS 中，您可以添加 display: none;，在 JavaScript 中添加

$(function() {
  $('#textDiv').css('display', 'block');
});

Answer 3

从 Google 引用字体时使用 display=block 请求参数。您的示例完整 URL：

https://fonts.googleapis.com/css?family=Quicksand&display=block

这又会导致 Google 样式表在其 @font-face 声明中使用 font-display: block 规则。此规则将指定您宁愿文本在加载字体之前保持未呈现状态，而不是以本地字体呈现文本并在网络字体准备就绪时重新呈现。

来源：

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#customize_the_text_rendering_delay https://css-tricks.com/google-fonts-and-font-display/

淡入淡出时无样式内容的闪烁

Flash of unstyled content when fading in text

html

javascript

css

jquery

fadein