CSS 解惑 - font-face 引用字体跨域

Question

我们知道页面直接进入 CSS 文件是不存在跨域问题的，但是有没有遇到过 CSS 中依赖的字体会存在跨域问题？

问题

比如，现在矢量小图标非常流行，也有一些开源的矢量图库让你用，比如我们将 font-awesome 这个 CSS 部署到一台服务器上，在另一台服务器访问。如：我们在 y.domain.com 地址中请求 x.domain.com 的这个资源。

<link href="//x.domain.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

你会看到类似的跨域的错误：

原因

font-awesome.css 依赖了字体文件：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

原因就在这里了， font-face 本身是有跨域问题的！也就是说，使用 font-face 所使用的字体一定要与当前页面在同一个域下，要么就看下面的解决办法。

解决

解决方案，就是使用 HTTP access controls 来处理。具体办法，就是将部署当前 CSS 的服务器做跨域支持，比如对于 Apache 的 .htaccess 中增加以下配置：

AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
	<IfModule mod_headers.c>
	      Header set Access-Control-Allow-Origin "*"
	</IfModule>
</FilesMatch>

如果你是其它的服务器，那么请自行处理下字体资源的跨域问题就行了。

参考

• Cross-domain font-face issues
• MOZILLA @font-face
• HTTP access controls