2010-10-29 71 views
36

這是@font-face聲明我已經使用:字體面與錯誤的MIME類型在Chrome

@font-face { 
    font-family: SolaimanLipi; 
    src: url("font/SolaimanLipi_20-04-07.ttf"); 
} 

這是工作完全在Firefox,但無法在Chrome。 後「檢查元素」我得到了以下信息:

資源解釋爲字體,但與MIME類型application /八位字節流傳輸。

任何建議,將不勝感激。

+2

如何在htaccess中添加'AddType font/ttf .ttf'? – MatTheCat 2010-10-29 12:32:08

+0

可能的重複http://stackoverflow.com/questions/2871655/proper-mime-type-for-fonts – 2014-10-29 23:02:55

回答

75

像往常一樣,不同的瀏覽器有不同的需求。這是一個跨瀏覽器@fontface聲明,從Paul Irish blog採取的 - 如果你需要生成從不同類型的

@font-face { 
    font-family: 'Graublau Web'; 
    src: url('GraublauWeb.eot'); 
    src: local('☺'), 
     url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); 
} 

.eot爲IE瀏覽器,瀏覽器的其餘部分請使用.woff或.TTF 源字體,你可以使用字體松鼠的font-face generator

你還需要一個.htaccess的字體,添加以下類型的位置:

AddType application/vnd.ms-fontobject .eot 
AddType font/ttf .ttf 
AddType font/otf .otf 
AddType application/x-font-woff .woff 
+0

非常感謝。這對我很有幫助。我使用.htaccess技巧,因爲我有權限。 – moonstruck 2010-10-31 14:37:47

+0

有沒有人有IIS兼容的解決方案? – David 2012-09-05 21:53:48

+1

@david我剛剛修復了iis中的一個相關問題。似乎沒有* .woff文件的默認映射*。添加&正確配置爲我工作的映射... – xandercoded 2012-09-30 15:14:15

0

,如果你可以編輯.htaccess文件,你應該嘗試DD

addType font/ttf .ttf 

否則,你可以使用SVG/SVGZ字體代替

4

你的字體文件不被trasferred用適當的MIME類型。這是一個易於修復的Web服務器配置問題。

對於nginx的,與現有類型的配置,通常在/etc/nginx目錄中找到合併這樣的:

types { 
   application/vnd.ms-fontobject    eot; 
   application/x-font-woff    woff; 
   font/otf    otf; 
   font/ttf    ttf; 
} 

對於Apache,添加這些行.htaccess你的文檔根發現:

AddType application/vnd.ms-fontobject .eot 
AddType font/ttf .ttf 
AddType font/otf .otf 
AddType application/x-font-woff .woff 
+0

這不是一個大問題,但令人困惑的問題。謝謝你的回答! – 2013-08-11 21:55:22