.htaccess - 如何通过CORS策略加载字体？

Question

要访问我的字体，我使用@font-face。

@font-face {
    font-family: 'Brandon Grotesque Regular';
    src: url('http://server/font/brandon_reg-webfont.eot');
    src: url('http://server/font/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://server/font/brandon_reg-webfont.woff2') format('woff2'),
         url('http://server/font/brandon_reg-webfont.woff') format('woff'),
         url('http://server/font/brandon_reg-webfont.ttf') format('truetype'),
         url('http://server/font/brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

不幸的是，我无法访问我的字体，我的请求已被 CORS 策略阻止。

Access to Font at 'http://server/font/brandon_blk-webfont.woff2' from origin 'http://server.fr' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.

所以我编辑了一个.htaccess

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

也没用。有什么想法吗？

Answer 1

这是解决方案:

<FilesMatch ".(otf|ttf|eot|woff|woff2)$">
SetEnvIf Origin "^http(s)?://(.+.)?(localhost|yourdomain.com)$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

把它放在你服务器上的 .htaccess 文件中，那里是放置字体的地方