Firefox：未显示本地托管的网络字体 - 即使使用 Access-Control-Allow-Origin "*"

Posted 2023-03-06

【中文标题】Firefox：未显示本地托管的网络字体 - 即使使用 Access-Control-Allow-Origin "*"

【英文标题】：Firefox: locally hosted webfont not shown - even with Access-Control-Allow-Origin "*"

【发布时间】：2016-06-20 21:20:13

【问题描述】：

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

【参考方案1】：

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