google fonts - 字体系列在页面后加载，如何解决？

Question

我在 html 中使用 google 字体：

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

CSS:

    .content-box{
    background: #f0f0f0;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
}

当我刷新时，我首先看到我的文本在 sans-serif 中持续 0.5 秒（加载时），然后它变成了 Open Sans

我该如何解决？

Answer 1

尝试删除 display=swap，因为它可能是导致此问题的原因。

您还应该下载字体并自行托管它们，这样渲染速度会更快。

让 google 为您托管它只会使加载速度变慢（可能有很多因素导致加载时间过长，可能是您的互联网问题，也可能是因为页面上有很多文字，也许两者都有。）

这会导致您在几秒钟内看到常规字体。

Answer 2

从 href 属性中删除 display=swap 并将其替换为 dispay=block。这应该会强制浏览器在显示文本之前等到字体加载完毕。

Answer 3

您可以尝试从 href 值的末尾删除值 display=swap。该设置意味着您的字体将首先加载为默认字体，然后再“交换”到真实字体。这会导致您看到的闪烁。

参见：https://css-tricks.com/almanac/properties/f/font-display/#values

google fonts - 字体系列在页面后加载，如何解决？

google fonts - font family is loaded after page, how to fix it?

html

css

google-fonts