惠娴小屋

最近,有好几个同事问我这个问题,总结了一下,可能有以下两个原因:1.路径不对您可能会说,我在本机的路径对了的呀,就是放到......
当前位置 : 首页 >> 前端 >> 正文

@font-face无法显示设置字体

2015年12月30日 15:13:41   归类:前端   评论(0)

最近,有好几个同事问我这个问题,总结了一下,可能有以下两个原因:

1.路径不对
您可能会说,我在本机的路径对了的呀,就是放到服务器上显示出不来而已。
拜托,您本机里本来就有那种字体呀,可是服务器上没有呀。测试方法如下:

src:url("http://www.apple.com/wss/fonts/PingHei/v1/PingHei-light.woff") format("woff"), url("http://www.apple.com/wss/fonts/PingHei/v1/PingHei-light.ttf") format("truetype”);
*src:url("http://www.apple.com/wss/fonts/PingHei/v1/PingHei-light.eot?") format("eot”);

利用直接调用外网字体文件的方法,测试您的样式代码有没有起作用,如果调用外网文件是正常显示的,那就真的是您的调用路径不对了。

2.格式不对
字体文件后缀是什么呢,有可能服务器不支持哦。另外ie浏览器支持eot后缀哦。
所以啊,@font-face的使用标准需要加载eot、ttf、woff和svg格式字体,只有加载这些字体才能在主流浏览器渲染哦。

3.是不是跨域啦
apache里设置@font-face 跨域,增加AddType:

AddType application/vnd.ms-fontobject .eot
AddType application/x-font-woff woff
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>


跨域问题的解决方案在网上找的,我也没有复现,请复现了的朋友告诉是不是可行。

最后,出于性能考虑,除非该字体对于页面是非常重要的,不然不要使用标准的@font-face。因为字体加载会阻塞文本的渲染,您可以让字体文件后加载,或是使用字体加载器(https://github.com/typekit/webfontloader)


Tags:@font-face 网页字体
下一篇 : 最近画的喵

参与评论

访客先生/女士,非常欢迎您参与评论   

昵称*

E-mail*

网站