Firefox：本地托管的 webfont 未显示 - 即使使用 Access-Control-Allow-Origin“*”

Question

我在网上发现了很多关于 Firefox 不显示本地网络字体（在服务器上）的问题，但是 none 的解决方案对我有用。在 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

问题已解决，这是由我的样式表标签中的 scoped 参数引起的。显然，浏览器对范围样式表有不同的实现，这在 Firefox 中导致字体根本无法加载文件

Firefox：本地托管的 webfont 未显示 - 即使使用 Access-Control-Allow-Origin“*”

Firefox: locally hosted webfont not shown - even with Access-Control-Allow-Origin "*"

css

.htaccess

firefox

webfonts

font-face