私のコードはcodepenで動作しますが、エディタで動作しないのはなぜですか？

私はhtmlとcssで崇高な3を使用しています。私のコードはcodepenで動作しますが、エディタで動作しないのはなぜですか？

適切な拡張子でファイルを保存しました。フォント "Lobster"を追加するには、Googleフォントを使用してください。この.htmlファイルをGoogle Chromeで開くと、ロブスターフォントなどの動作しませんが、codepenで実行しようとすると機能します。私はWindows XP上で実行されているシステムを使用しています。私はWindows 10で私のラップトップで同じことを実行しようとしたとクロムブラウザが更新されますが、問題は起こっていません。

これはスタックオーバーフローのエディタでも機能しています。

.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

に従うべきであるGoogleのフォントを使用するので、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プロトコルではopファミリのフォントファミリーを使用します –

私のコードはcodepenで動作しますが、エディタで動作しないのはなぜですか？

答えて

関連する問題