文章/答案/技术大牛

发布

问Google字体API不工作
EN

Stack Overflow用户

提问于 2017-12-12 09:08:52

回答 1查看 815关注 0票数 0

我正在尝试将Google API字体添加到我的网页中，以了解有关HTML的更多信息，但我无法加载任何API字体。我一直在尝试使用Santina字体，但它总是恢复为我的“默认”Courier New字体。当我将@import语句添加到CSS文档的顶部时，代码可以正常工作，所以我相信链接是正确的，但是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;
}

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

html

css

fonts

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-12 11:13:00

你得到了ref=“样式表”而不是rel=“样式表”。

多伊尔。

#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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47763930

复制

相似问题

问Google字体API不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google字体API不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google字体API不工作
EN