CSSローカルフォントが表示されません

私は間違ってコーディングしていたはずのものはもう分かりません。テスト目的のために、自分のウェブサイトにローカルフォントを使用したいと思います。しかし、私はそれがすべてのデバイスに表示されることはありません。ここに私のコードは次のとおりです。CSSローカルフォントが表示されません

HTML：

<head> 
    some basic stuff ... 
    <link rel="stylesheet" href="css/style.css"> 
    </head>

CSS：

body { 
    overflow-x:hidden; 

    font-family: 'Circular Std Book', Helvetica, Arial, " sans-serif"!important; 
    src: url('CircularStd-Book.eot'); 
    src: url('CircularStd-Book.eot?#iefix') format('embedded-opentype'), 
     url('CircularStd-Book.woff') format('woff'), 
     url('CircularStd-Book.ttf') format('truetype'), 
     url('CircularStd-Book.svg#CircularStd-Book') format('svg'); 
    }

Example image

それは私のデスクトップコンピュータ上ではなく、他のPCで作業を行う... おかげであなたの助けに。それでも、このいずれかで動作していない

：

@font-face { 
     font-family: 'Circular Std Book', Helvetica, Arial, " sans-serif"!important; 
    src: url('../font/CircularStd-Book.eot'); 
    src: url('../font/CircularStd-Book.eot?#iefix') format('embedded-opentype'), 
     url('../font/CircularStd-Book.woff') format('woff'), 
     url('../font/CircularStd-Book.ttf') format('truetype'), 
     url('../font/CircularStd-Book.svg#CircularStd-Book') format('svg');  
} 

body { 
    overflow-x:hidden; 
    font-family: 'Circular Std Book', Arial, sans-serif; 
    }

出典

2016-12-07 Julian

フォントはstyle.cssと同じディレクトリに保存されていますか？ – Kyle

いいえ、フォントはフォルダー/フォントにあり、フォルダー/css/style.cssのスタイル – Julian

作業中のデスクトップにそのフォントをインストールしていますか？なぜそれがローカルではなく他の場所でも動作する理由を説明するかもしれないし、CSSやフォントにもまだ問題があることを意味するでしょう。 – AndFisher

あなたの例では、ここでの例を参照してください@font-face

が欠けているように見える：https://css-tricks.com/snippets/css/using-font-face/また

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

body { 
    font-family: 'MyWebFont', Fallback, sans-serif; 
}

を述べたように、確認してくださいパスは正しいです。パスは、CSSファイル自体に相対的です。

出典

2016-12-07 11:01:44 AndFisher

ああ、私は@ font-faceを見逃しました。 – Kyle

私はそれがCSSに関連しているのか分かりませんでしたが、意味があります。ありがとうございます。とにかくそれでもまだ表示されていません... – Julian

'sans-serif'を引用する必要はありません – AndFisher

！importantタグを使用してfont-familyにフォールバックオプションを定義すると、このエラーが発生しました。私はフォールバックを削除しました。最終的な作業コードは次のとおりです。

@font-face { 
     font-family: 'CircularStdBook'; 
    src: url('CircularStd-Book.eot'); 
    src: url('../font/CircularStd-Book.eot?#iefix') format('embedded-opentype'), 
     url('../font/CircularStd-Book.woff') format('woff'), 
     url('../font/CircularStd-Book.ttf') format('truetype'), 
     url('../font/CircularStd-Book.svg#CircularStd-Book') format('svg');  
} 

body{ 
    overflow-x:hidden; 
    font-family: 'CircularStdBook', Arial, sans-serif; 
    }

ありがとうございました。

出典

2016-12-08 11:29:58 Julian

CSSローカルフォントが表示されません

答えて

関連する問題