我正在尝试从离线的免费模板更改字体。下面，您可以看到我的列表的 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 {}
现在，我想将字体更改为从 Google 导入的 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 样式更改字体但失败了。谁能帮忙？
最佳答案
首先在您的head 中添加您从google 获得的Source Sans Pro 字体的链接。这是从谷歌获取的
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
然后在你的 css 添加
font-family: 'Source Sans Pro', sans-serif;
或者你可以尝试使用谷歌提供的@import。在你的 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 - 使用 Google 字体通过 CSS 更改字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42517386/