加載本地字體通過CSS

我有一個小的靜態網站，我需要把它移到上的USB使人們有可能通過這個USB打開它。加載本地字體通過CSS

通過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; 
}

而且我沒有問題，加載在訪問該網站的字體通過我們

編輯：

從控制檯的屏幕，看起來像「字體」文件夾中沒有「源」

裝

問題只當我嘗試下載該網站在當地出現：字體的不加載。

我在寫什麼錯？

來源

2017-10-10 Zad Zale

你檢查錯誤控制檯？也許有一個問題找到該文件？右鍵單擊，選擇「檢查元素」，然後單擊控制檯選項卡。有關文件位置可能存在錯誤。 –

@ReeceKenney嗨，已經很累了，在控制檯沒有錯誤：/ –

你能告訴你如何在你的樣式表中使用該字體嗎？ – user1594

這可能是因爲路徑問題。嘗試使用相對路徑（假設資產文件夾是在同一個地方作爲HTML）：../assets/fonts/MyFontSerifReg.ttf

來源

2017-10-10 11:41:20 marknote

嗨，也試過這樣並沒有什麼......總是同樣的問題 –

將字體文件相同的地方用該html，並使用本地加載它：@ font-face {font-family {font-family：'MyFont_SerifReg';} src：local（'MyFontSerifReg.ttf'）格式（'truetype'）; – marknote

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

請一定要交叉檢查以下故障排除指南：體{ 字體家庭：

路徑URL（）
應用樣式，如下例如提供 'MyFont_SerifReg';在規則定義//同名}
加入其中，規則是在HTML定義CSS文件的參考。

來源

2017-10-10 11:55:20 user1594

嗨，我用這些信息更新了我的帖子...... –

加載本地字體通過CSS

回答

相關問題