使用 Google 字体通过 CSS 更改字体答案

【问题标题】：Changing Font via CSS using Google Fonts使用 Google 字体通过 CSS 更改字体
【发布时间】：2017-02-28 19:40:28
【问题描述】：

我正在尝试从离线的免费模板更改我的字体。下面，您可以看到我的列表的 HTML。

<header>
    <h1><a href="index.html" id="logo"></a></h1>
        <nav>
            <ul id="menu">
                <li><a href="#!/page_Home"><span></span><strong>Home Page</strong></a></li>
                <li><a href="#!/page_About"><span></span><strong>About</strong></a></li>
                <li><a href="#!/page_Portfolio"><span></span><strong>Portfolio</strong></a></li>
                <li><a href="#!/page_Services"><span></span><strong>My Services</strong></a></li>
                <li><a href="#!/page_Contact"><span></span><strong>Contact</strong></a></li>
            </ul>
        </nav>
</header>

下面是列表的 CSS：

header {
    width: 360px;
    float: left
}
#menu {
    padding-top: 122px
}
#menu > li {
    width: 100%;
    overflow: hidden;
    padding-bottom: 4px
}
#menu > li > a {
    display: inline-block;
    font-size: 26px;
    line-height: 54px;
    height: 56px;
    color: #fff;
    background: #000;
    text-decoration: none;
    position: relative;
    letter-spacing: 0px;
    cursor: pointer
}
#menu > li > a span {
    display: block;
    background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}
#menu > li > a strong {
    position: relative;
    display: block;
    padding: 0 95px 0 40px;
    height: 56px
}
#menu > li > a:hover,
#menu > li > a.active {
    color: #000
}
#menu > li > a:hover strong,
#menu > li > a.active strong {}

现在，我想将字体更改为 Source Sans Pro，这是从 Google 导入的。但是，我无法让它工作。所以我改用默认字体来查看我是否弄乱了字体的谷歌导入，这没有用。下面，你可以看到我尝试解决这个问题：

#menu > li > a {
    font-family: "Times New Roman";
    display: inline-block;
    font-size: 26px;
    line-height: 54px;
    height: 56px;
    color: #fff;
    background: #000;
    text-decoration: none;
    position: relative;
    letter-spacing: 0px;
    cursor: pointer
}

我检查了是否有任何 !important 阻止了内联样式覆盖，但任何 CSS 样式中都没有。

总而言之，我正在尝试使用内联 CSS 样式更改字体，但失败了。有人可以帮忙吗？

【问题讨论】：

这里显示的代码中没有任何内容表明使用了 Source Sans Pro 或任何外部字体。您可能应该阅读the documentation。
回应你自己迈克，你是对的。我应该更清楚。在开始导入之前，我希望能够先使用默认字体。如果您知道我的意思，请逐步建立个人学习。抱歉没有说清楚。
@CRover 参考下面答案的评论。

标签： html css

【解决方案1】：

首先在您的head 中添加link 用于您从google 获得的Source Sans Pro 字体。这是从谷歌获得的

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pr‌o" rel="stylesheet">

然后在你的css 添加

font-family: 'Source Sans Pro', sans-serif;

或者您可以尝试使用@import google 提供的。在你的html 头部添加

<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
</style>

然后是字体系列

font-family: 'Source Sans Pro', sans-serif;

header {
    width: 360px;
    float: left
}
#menu {
    padding-top: 122px
}
#menu > li {
    width: 100%;
    overflow: hidden;
    padding-bottom: 4px
}
#menu > li > a {
    display: inline-block;
    font-size: 26px;
    line-height: 54px;
    height: 56px;
    color: #fff;
    background: #000;
    text-decoration: none;
    position: relative;
    letter-spacing: 0px;
    cursor: pointer
}
#menu > li > a span {
    display: block;
    background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}
#menu > li > a strong {
    position: relative;
    display: block;
    padding: 0 95px 0 40px;
    height: 56px
}
#menu > li > a:hover,
#menu > li > a.active {
    color: #000
}
#menu > li > a:hover strong,
#menu > li > a.active strong {}
#menu > li > a {
    font-family: 'Source Sans Pro', sans-serif;
    display: inline-block;
    font-size: 26px;
    line-height: 54px;
    height: 56px;
    color: #000;
    background: #000;
    text-decoration: none;
    position: relative;
    letter-spacing: 0px;
    cursor: pointer
}

<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<header>
    <h1><a href="index.html" id="logo"></a></h1>
        <nav>
            <ul id="menu">
                <li><a href="#!/page_Home"><span></span><strong>Home Page</strong></a></li>
                <li><a href="#!/page_About"><span></span><strong>About</strong></a></li>
                <li><a href="#!/page_Portfolio"><span></span><strong>Portfolio</strong></a></li>
                <li><a href="#!/page_Services"><span></span><strong>My Services</strong></a></li>
                <li><a href="#!/page_Contact"><span></span><strong>Contact</strong></a></li>
            </ul>
        </nav>
</header>
</body>
</html>

希望这可行

【讨论】：

不幸的是它没有用。您可以在下面看到我尝试的内容： HTML：pastebin.com/k906PkBx CSS：pastebin.com/GFX4ER7t 查看第 35 行的 CSS 更改。
您应该检查您是否将字体放置在正确的位置，并在尝试使用谷歌字体时确保您在线
当您的意思是在线时，您的意思是互联网连接正确吗？关于字体的位置，我已经检查过了，它似乎在正确的位置。
我目前不在城里，但我一定会尝试一下！感谢您的快速回复。