@ font-face未加載字體

我正在嘗試使用@ font-face，由於某種原因它無法正常工作（IE9，Chrome和Firefox）。我確定在加載字體時我指向了正確的目錄，但它仍然不起作用。@ font-face未加載字體

這裏是我的代碼：

@font-face{ 
font-family: 'test'; 
src: url('../fonts/FontName.ttf'), 
     url('../fonts/FontName.eot'); 
font-weight: normal; 
font-style: normal; 
}

，把它：

#header{ 
text-align:left; 
padding: 10px; 
font-family:test; 
}

我到底做錯了什麼？

來源

2013-01-31 ReallyGoodPie

您有兩個文件夾名稱，'font'和'fonts'。兩者都存在嗎？並且都是你的CSS文件的一個目錄？ –

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ – Dom

@Cory我已經在我的真實代碼中完成了這個（詢問後），它仍然無法加載。 – ReallyGoodPie

Internet Explorer使用的，而不是使用的版本.eot的字體，這是不是在代碼中使用您的版本.woff。我從fontsquirrel使用@font-face generato R工具來獲取所有不同的字體變化

輸出應該是這個樣子：

@font-face{ 
font-family: 'test'; 
src: url('../fonts/FontName.eot'), 
    url('../fonts/FontName.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/FontName.woff') format('woff'), 
    url('../fonts/FontName.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal; 
}

來源

2013-01-31 21:04:45 Alexander44

試試這個：

@font-face{ 
font-family: 'test'; 
src: url('../fonts/Minecraft.ttf'), 
     url('../fonts/minecraft.eot'); 
font-weight: normal; 
font-style: normal; 
}

在你的代碼有兩個文件夾：字體和字體，在我的例子中，我使用的字體

來源

2013-01-31 15:36:36

不，我已經將字體更改爲字體@ReallyGoodPie –

哦，字體文件夾，我在我的真實代碼中更改了它，它不會更改 – ReallyGoodPie

返回一些錯誤？如果您將文件夾字體放入另一個文件夾中，我不知道 –

通過FontSquirrel發電機運行您的字體，這將其轉換爲各種瀏覽器支持的各種格式。

它也應該給你一個你可以使用的CSS blob，只需調整字體文件的路徑即可。

http://www.fontsquirrel.com/fontface/generator

來源

2013-01-31 15:42:36 Steph

好的，我已經完成了這個工作，我把它們放在我的字體文件夾中，複製了css（編輯它在字體文件夾中查找），並且它在這個例子中看起來很完美，但是在我的實際頁面上，「無法加載資源」 – ReallyGoodPie

除了人們一直在說關於不同類型的字體（和使用format()元素以及url()），檢查您的css無關性以確保沒有任何內容設置#header或其中的元素爲font-weight: bold也是值得的。既然你只指定了一個正常的體重/正常風格的字體，如果有東西變粗體，字體將不會顯示出來。

來源

2013-01-31 21:09:05

@ font-face未加載字體

回答

相關問題