如何通过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策略阻止了。

访问字体at"http://server/font/brandon_blk-webfont.woff2"来自原产地'http://server.fr'已被CORS策略阻止:请求的文件中没有"Access-Control-Allow-Origin"标头资源。因此，不允许使用原产地"http://localhost:8888"访问。

所以我编辑一个。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文件中，字体放在那里