2010-10-29 69 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