Question

我正在使用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.

Answer 1

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

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

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

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

1 个答案: