font-face 在 Firefox无法正常工作问题

Posted 2020-06-09

@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）

 

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

 

这里也有一个办法

# 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 ‘*‘;

}

https://icomoon.io/#docs