CSSを使用してローカルにフォントをロードする

Question

私は静的な小さなウェブサイトを持っています。私はこのUSB経由で開くことができるように、USB上で移動する必要があります。私は（カスタムフォントです）フォントのこれらのルールを定義したCSS経由

：

@font-face { 
    font-family: 'MyFont_SerifReg'; 
    src: url('/assets/fonts/MyFontSerifReg.ttf') format('truetype'); 
    src: url('/assets/fonts/MyFontSerifReg.eot'); /* IE9 Compat Modes */ 
    src: url('/assets/fonts/MyFontSerifReg.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */ 
    src: url('/assets/fonts/MyFontSerifReg.woff') format('woff'); /* Pretty Modern Browsers */ 
} 

@font-face { 
    font-family: 'MyFont_SansBol'; 
    src: url('/assets/fonts/MyFontSansBol.ttf') format('truetype'); 
    src: url('/assets/fonts/MyFontSansBol.eot'); /* IE9 Compat Modes */ 
    src: url('/assets/fonts/MyFontSansBol.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */ 
    src: url('/assets/fonts/MyFontSansBol.woff') format('woff'); /* Pretty Modern Browsers */ 
} 

@font-face { 
    font-family: 'MyFont_SansLig'; 
    src: url('/assets/fonts/MyFontSansLig.ttf') format('truetype'); 
    src: url('/assets/fonts/MyFontSansLig.eot'); /* IE9 Compat Modes */ 
    src: url('/assets/fonts/MyFontSansLig.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */ 
    src: url('/assets/fonts/MyFontSansLig.woff') format('woff'); /* Pretty Modern Browsers */ 
} 

@font-face { 
    font-family: 'MyFont_SansDem'; 
    src: url('/assets/fonts/MyFontSansDem.ttf') format('truetype'); 
    src: url('/assets/fonts/MyFontSansDem.eot'); /* IE9 Compat Modes */ 
    src: url('/assets/fonts/MyFontSansDem.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */ 
    src: url('/assets/fonts/MyFontSansDem.woff') format('woff'); /* Pretty Modern Browsers */ 
} 

body { 
    font-family: 'MyFont_SansLig'; 
} 

h2 { 
    font-family: 'MyFont_SerifReg'; 
    font-size: 40px !important; 
} 

h4 { 
    font-family: 'MyFont_SansBol'; 
    line-height:1.5em; 
} 

p { 
    font-family: 'MyFont_SansLig'; 
    font-size:16px; 
} 

b { 
    font-family: 'MyFont_SerifReg'; 
    font-size:18px; 
} 

われ

EDITを経由してウェブサイトを訪問している間、私はフォントをロードする問題がない：

コンソールからの画面、「フォント」フォルダを「ソース」

にロードされていないように見えます

問題は、ローカルでWebサイトを読み込もうとしたときにのみ表示されます。フォントは読み込まれません。

私は間違って書いていますか？

Answer 1

パスの問題が原因である可能性があります。 （htmlとして同じ場所にフォルダがある資産を想定）、相対パスを使用してみてください：../assets/fonts/MyFontSerifReg.ttf

は

Answer 2

@font-face { 
    font-family: 'MyFont_SerifReg'; 
    src: url('/assets/fonts/MyFontSerifReg.ttf') format('truetype'), 
     url('/assets/fonts/MyFontSerifReg.woff') format('woff'); 
} 

に確認してくださいトラブルシューティングガイドの下にクロスチェック：

1. URLに設けられたパス（）
2. 例えば以下のようにスタイルを適用する： 本体{フォントファミリ： 'MyFont_SerifReg'。 //ルールに定義された同じ名前 }
3. ルールがHTMLで定義されているCSSファイルの参照を追加します。