font-face 在 Firefox无法正常工作问题
@font-face存在的问题:
1、不同浏览器支持不同格式
2、Firefox默认情况下不允许跨域font-face,除非你可以添加“Access-Control-Allow-Origin” header to the font.
一个暂时的解决方案:
1、去fontsquirrel.com下载需要的font-face kit
2、到fontsquirrel font-face generator上传刚下载的font-face kit
3、选择Expert选项
4、格式选择 ‘TrueType’, ‘EOT’, and ‘SVG’(woff是一种只有Firefox才支持的格式,但是Firefox也支持.ttf,所以就不用woff了)
5、选择‘Base64′ 编码
6、下载下来使用就行了
(实际上就是把ttf集合到CSS里,所以可以解决Firefox跨域限制。缺点是CSS文件变大了,对于那些不支持ttf的格式浏览器,像手机Safari和ie)
这里也有一个办法
# For Apache
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
# For nginx
location ~* \.(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin '*';
}