Question

我的网页有问题：

我的网站文本使用的是Google的字体“ 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”或某些网络浏览器默认字体系列，然后将字体更改为google font。不管我导入css还是标题中的链接，它都具有相同的作用。

任何人都可以帮助我解释原因以及如何解决吗？是因为//fonts.googleapis.com/css的加载延迟？

谢谢您的帮助

Answer 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;，这就是您使用该闪光灯的原因。

Answer 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');

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

2 个答案: