为什么我的字体无法正确加载？答案

【问题标题】：Why are my fonts not loading up correctly?为什么我的字体无法正确加载？
【发布时间】：2019-10-31 11:55:30
【问题描述】：

我正在练习 SCSS，两分钟前我的代码还在工作，然后才拆分变量并创建文件夹结构。

但是现在，无论我改变什么，都无法改变字体。它只加载了 Times New Roman。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

    <!-- <link rel="stylesheet" href="css/icon-font.css"> -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" type="image/png" href="img/favicon.png">

    <title>Tours</title>
</head>

<body>
    <header class="header">
        <div class="header__logo-box">
            <img src="img/logo-white.png" alt="Logo" class="header__logo">
        </div>

        <div class="header__text-box">
            <h1 class="heading-primary">
                <span class="heading-primary--main">Outdoors</span>
                <span class="heading-primary--sub">is where life happens.</span>
            </h1>

            <a href="#section-tours" class="btn btn--white btn--animated">Discover our tours</a>
        </div>
    </header>


</body>

    body {
        font-family: "Lato", sans-serif;
        font-weight: 400;
        /*font-size: 16px;*/
        line-height: 1.7;
        color: $color-grey-dark;
        padding: 3rem;
    }

    .heading-primary {
        color: $color-white;
        text-transform: uppercase;

        backface-visibility: hidden;
        margin-bottom: 6rem;
        }

The imports are ok, so it should be working.

【问题讨论】：

标签： sass google-font-api google-fonts

【解决方案1】：

您的代码在 jsfiddle 中运行良好。它将 Lato 显示为字体。您是否尝试清除缓存？您也可以尝试将链接更改为：

    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap" rel="stylesheet">

如果在渲染之前下载需要很长时间，这将提供无限的交换周期来加载字体。

【讨论】：