通過使用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更改字體

回答

相關問題