显示默认字体系列后 HTML 字体系列显示延迟答案

【问题标题】：HTML font family display delayed after displaying default font family显示默认字体系列后 HTML 字体系列显示延迟
【发布时间】：2019-11-26 22:26:49
【问题描述】：

我的网页有问题：

我正在使用谷歌的字体“Source Sans Pro”作为我网站的文本。这就是我的 html 的样子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<style>
    body {
        font-family: "Source Sans Pro";
        font-size: 45px;
    }
</style>
</head>
<body>
<p>Simply The Best </p>
</body>
</html>

当我显示页面时，我发现页面闪烁显示文本为“Times New Roman”或某些网络浏览器默认字体系列，然后将字体更改为谷歌字体。无论我在 css 中导入，还是在我的标题中链接，它都有相同的努力。

谁能帮我解释一下原因以及我应该如何解决？是不是因为 //fonts.googleapis.com/css 的加载延迟？

提前感谢您的帮助

【问题讨论】：

标签： html css fonts

【解决方案1】：

尝试使用：

 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

而不是你的：

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">

在你的代码中它有font-display: swap;，这就是你拥有那个闪存的原因。

【讨论】：

【解决方案2】：

在我的例子中，我使用 import 来设置字体样式，我有 3 或 4 秒的延迟，我删除了 &display=swap 并且它正在工作。我不确定它是否正确

原来是

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;1,100&display=swap');

改为

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;1,100');

【讨论】：