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

【问题标题】：google fonts - font family is loaded after page, how to fix it?google fonts - 字体系列在页面后加载，如何解决？
【发布时间】：2020-12-17 11:43:36
【问题描述】：

我在 html 中使用谷歌字体：

    <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

我该如何解决这个问题？

【问题讨论】：

标签： html css google-fonts

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

您还应该下载字体并自己托管它们，以便更快地呈现。

让谷歌为您托管只会使其加载速度变慢（可能是加载时间长的许多因素，可能是您的互联网，可能是因为页面上有很多文字，可能两者兼而有之。）

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

【讨论】：