通过使用Google字体的CSS更改字体

我试图从脱机的免费模板中更改我的字体。在下面，你可以看到我的列表的HTML。通过使用Google字体的CSS更改字体

<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导入，但这并不奏效。下面，你可以看到我试图解决这个问题：

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

我检查，看是否有重要的是防止内联样式覆盖，但也有没有任何CSS样式。

总结，我试图改变使用内联CSS样式的字体，但失败。谁能帮忙？

来源

2017-02-28 Shaun Cockram

没有什么代码这里介绍的是表示使用Source Sans Pro或任何前外部字体。您应该阅读[文档]（https://developers.google.com/fonts/docs/getting_started）。 –

回应你自己迈克，你是对的。我应该更清楚。我希望能够在开始进行导入之前先使用默认字体进行操作。如果你知道我的意思，可以逐步建立个人学习。对不起，不太清楚。 –

@Cover请参阅下面的回答评论。 –

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

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pr‌o" 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

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>

希望这个作品

来源

2017-02-28 19:54:50

不幸的是它没有工作。您可以在下面看到我尝试的内容：HTML：http://pastebin.com/k906PkBx CSS：http://pastebin.com/GFX4ER7t查看第35行的CSS更改。 –

你应该检查你是否把字体放在正确的地方，并确保你在线谷歌字体时 –

当你的意思是在线，你的意思是互联网连接正确？关于字体的位置，我已经检查过，看起来是在正确的位置。 –

通过使用Google字体的CSS更改字体

回答

相关问题