爲什麼我的代碼在codepen上工作，而不是在我的編輯器上工作？

我使用崇高3的HTML和CSS。爲什麼我的代碼在codepen上工作，而不是在我的編輯器上工作？

我用適當的擴展名保存了文件。已使用谷歌字體添加字體「龍蝦」。當我在谷歌瀏覽器上打開這個.html文件時，它不起作用（即，龍蝦字體），但當它嘗試在代碼本上運行時它正在工作。我正在使用在Windows XP上運行的系統。我試着用windows 10在我的筆記本電腦上運行同樣的東西，Chrome瀏覽器已更新，但問題仍未解決。

它也在處理堆棧溢出的編輯器。

.nav-pills { 
 
    font-family: Lobster; 
 
    font-size: 2.2em; 
 
    background-color:black; 
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
    <title>Puneeth</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lobster" /> 
 
    <link rel="stylesheet" href="portfolio.css" /> 
 
    </head> 
 
    <body> 
 
    <div class="container-fluid"> 
 
     <ul class="nav nav-pills"> 
 
     <li><a href="#">Puneeth S</a></li> 
 
     <li class="pull-right"><a href="#">Contact</a></li> 
 
     <li class="pull-right"><a href="#">Portolio</a></li> 
 
     <li class="pull-right"><a href="#">About</a></li> 
 
     <li class="pull-right"><a href="#">Home</a></li> 
 
     </ul> 
 
    </div> 
 
    </body> 
 
</html>

來源

2016-08-07 puneeth8994

所以CSS是工作，但唯一不工作是龍蝦字體？ –

'console'中的任何錯誤？ –

當本地加載HTML文件到您的瀏覽器，它會使用file:協議。由於字體爲href="//fonts.googleapis.com，因此瀏覽器也會嘗試使用file:協議加載該文件。

解決方案：使用字體路徑的完整URL，包括正確的協議。

href="http://fonts.googleapis.com/...

，它工作在這裏的原因，SO片斷或codepen是你調用這些頁面與http:了。

來源

2016-08-07 08:24:50

謝謝。我現在明白了....... – puneeth8994

.nav-pills { 
 
    /*edit your font-family in css and the code will work done */ 
 
    font-family: 'Lobster', cursive; 
 
    font-size: 2.2em; 
 
    background-color:black; 
 
}

使用谷歌的字體，你應該遵循的規則

來源

2016-08-07 08:51:16

哪個規則不是隨後的OP？儘管我同意在字體名稱周圍使用引號是一個好主意，但在這種情況下，它們不是必需的，其中'Lobster'不是CSS關鍵字。所以OP遵守規則。 –

在這種情況下，您可以在本地使用字體系列，但可以使用帶http協議的字體系列 –

爲什麼我的代碼在codepen上工作，而不是在我的編輯器上工作？

回答

相關問題