谷歌字体 API 不工作答案

【问题标题】：Google Fonts API Not Working谷歌字体 API 不工作
【发布时间】：2017-12-12 01:08:51
【问题描述】：

我正在尝试将 Google API 字体添加到我的网页以了解有关 HTML 的更多信息，但我无法加载任何 API 字体。我一直在尝试使用 Santina 字体，但它总是恢复为我的“默认”Courier New 字体。当我在 CSS 文档的顶部添加 @import 语句时，代码有效，所以我相信链接是正确的，但 HTML 文档似乎没有将 API 字体链接到 CSS 页面。我是否以某种方式覆盖了 CSS 文档？

我的 HTML 文档：

<!DOCTYPE html>
<html>
<head>
    <title>Generic Website Name</title>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Sansita:400"
        ref="stylesheet" type="text/css">
    <link rel="stylesheet" href="styles.css">
</head>

<body style="background-color:hsl(189,58%,71%);">
    <h1 id="title">Title</h1>
    <hr>
    <h3 class="headermain">Salutations!</h3>
    <p class="paramain">Welcome to the Website</p>
    <a href="https://www.google.com" target="_blank">Google!</a>
</body>
</html>

CSS 文档：

#title {
    font-family:"Sansita", Courier New;
    font-style: normal;
    color: #f0f0f0;
    text-align: center;
    font-size: 5vw;
    letter-spacing: 3px;
}

 .headermain {
    color: #020202;
    text-align: left;
    font-size: 26px;
    font-family: Calibri;
}

.paramain {
    color: #010101;
    text-align: left;
    font-size: 26px;
    font-family: Calibri;
}

编辑：为代码添加了更好的间距

【问题讨论】：

您的代码似乎可以正确加载字体。您是否尝试过使用CTRL + F5 清除缓存，并在单击刷新图标时按住SHIFT 清除您的CSS 缓存？
@ObsidianAge 我都试过了，都没有改变我屏幕上的字体。我正在使用最新的稳定版本的 Firefox 和 Chrome 通过本地存储的 HTML 文件而不是网络服务器打开文件。不确定这是否会改变任何事情。
Google 字体的 @import 和 HTML <link> 方法都应该工作；后者对您不起作用似乎很奇怪。完全按原样使用上面的代码显示字体对我来说是正确的。如果这不是缓存问题，我只能假设有另一个具有更高特异性的规则覆盖了该规则。

标签： html css fonts

【解决方案1】：

你有 ref="stylesheet" 而不是 rel="stylesheet"

哦。

#title {
    font-family:'Sansita', times, sans-serif;
    font-style: normal;
    color: #f0f0f0;
    text-align: center;
    font-size: 5vw;
    letter-spacing: 3px;
}

 .headermain {
    color: #020202;
    text-align: left;
    font-size: 26px;
    font-family: Calibri;
}

.paramain {
    color: #010101;
    text-align: left;
    font-size: 26px;
    font-family: Calibri;
}

<!DOCTYPE html>
<html>
<head>
    <title>Generic Website Name</title>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Sansita:400" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>

<body style="background-color:hsl(189,58%,71%);">
    <h1 id="title">Title</h1>
    <hr>
    <h3 class="headermain">Salutations!</h3>
    <p class="paramain">Welcome to the Website</p>
    <a href="https://www.google.com" target="_blank">Google!</a>
</body>
</html>

【讨论】：