Firefox：本地托管的webfont未显示 - 即使使用Access-Control-Allow-Origin＆＃34; *＆＃34;

Question

我在网上发现了很多关于Firefox没有显示本地webfonts（在服务器上）的问题，但没有一个解决方案适合我。在Firefox中打开https://nl.hacktisch.com/以查看字体（分享按钮中的Karla和图标字体，右上角）不会加载。

大多数答案都是关于Firefox中的严格原产地限制，但即使使用.htaccess中的以下设置，它也不起作用：

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

甚至

Header set Access-Control-Allow-Origin "*"

你可以在firefox检查器中看到浏览器甚至没有尝试加载字体：

这表明css字体声明是错误的，但我也尝试了几种在css中定义字体的方法。目前如下：

@font-face {
    font-family: Karla;
    font-weight: 400;
    font-style: normal;
    src: url('/fonts/k.eot');
    src: url('/fonts/k.eot?#iefix') format('embedded-opentype'), local('Karla'), local('k'), url('/fonts/k.woff2') format('woff2'), url('/fonts/k.woff') format('woff'), url('/fonts/k.ttf') format('truetype'), url('/fonts/k.svg#Karla') format('svg')
}
@font-face {
    font-family: Karla;
    font-weight: 700;
    font-style: normal;
    src: url('/fonts/k7.eot');
    src: url('/fonts/k7.eot?#iefix') format('embedded-opentype'), local('Karla Bold'), local('k7'), url('/fonts/k7.woff2') format('woff2'), url('/fonts/k7.woff') format('woff'), url('/fonts/k7.ttf') format('truetype'), url('/fonts/k7.svg#Karla') format('svg')
}
body{
    font-family: Karla, sans-serif;
}

和

@font-face {
    font-family: 'ico';
    src: url('/fonts/ico.eot?35583524');
    src: url('/fonts/ico.eot?35583524#iefix') format('embedded-opentype'),
        url('/fonts/ico.woff?35583524') format('woff'),
        url('/fonts/ico.ttf?35583524') format('truetype'),
        url('/fonts/ico.svg?35583524#ico') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 1

问题解决了，它是由我在样式表标签上的作用域参数引起的。显然浏览器有不同的范围样式表实现，在Firefox中导致字体表面根本不加载文件