包括谷歌web字體不工作

我試圖使用谷歌的字體，像這樣：包括谷歌web字體不工作

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <!-- <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'> --> 
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'> 
    <style> 
     body { 
      font-size: 2em; 
      font-family: 'Source Sans Pro', serif; 
      font-style: normal; 
      font-weight: 300; 
     } 
    </style> 
</head> 
<body> 
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div> 
</body> 
</html>

，你可以看到我和http和https試圖爲this stackoverflow answer建議，但似乎沒有任何工作。

我在做什麼明顯錯誤？

此外，你可以看到字體採取後備serif字體。現在爲什麼line-height在刪除未被使用的字體時會發生變化？

我使用谷歌瀏覽器版本：52.0.2743.116

而真正的問題是：如何以包括谷歌的字體？

，因爲它似乎是從開發工具

來源

2016-08-12 caramba

嘗試在隱身模式下打開一個網站上加載，也許有些瀏覽器插件染指你的代碼。我已經根據你的代碼創建了一個jsbin，它工作的很好，我也將它保存在我的硬盤上，它也可以工作。查看與您的瀏覽器完全相同的Chrome版本。

編輯：問題解決。經過一番調查和反覆試驗後，結果證明爲了讓Caramba能夠工作，他不得不從字體樣式中修改字體系列以包含三個以逗號分隔的值以便正常工作，所以

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

沒有工作，而

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

一樣。

來源

2016-08-12 06:29:41

感謝您的幫助，我在jsbin中也使用隱身模式獲得serif字體:( – caramba

chrome dev工具中的網絡選項卡顯示了什麼？頁面是否加載http://fonts.googleapis.com/css?family = Source + Sans + Pro：400,300,300,300italic，400italic，700,700italic資源和http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlJbPFduIYtoLzwST68uhz_Y.woff2資源是否成功？ –

好了！我更新了問題打印屏幕顯示'css？family'已加載！ – caramba

回答

相關問題