javascript - 淡入淡出时无样式内容的闪烁-6ren

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

转载作者：太空宇宙更新时间：2023-11-03 20:04:30

我想不出一种方法来防止淡入本应使用 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/

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

最佳答案

您可以在引用实际字体时预加载 字体。您在这里引用的是一个样式表，它使用 Quicksand 的不同变体将 @font-face 添加到您的文档中。

解决方案是将样式表链接粘贴到您的浏览器中并获取字体的直接链接，然后将其作为引用加载到您的 html 文档中:

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

关于javascript - 淡入淡出时无样式内容的闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58385568/

文章推荐： python - Celery apply_async 将 kwargs 传递给链中的所有任务

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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