css - 字体在 Firefox 的索引页面上不起作用

Question

我在此网页上使用 Helvetica Neue Light 和 Fontawesome。这些字体在 Chrome 和 Safari 以及 Firefox 的 INDEX 页面上工作正常，但在 Firefox 的所有其他页面上它们不起作用。

这是我的@font-face 代码:

@font-face {
    font-family: 'HelveticaNeue-Light';
    src: url('HelveticaNeue-Light.eot') format('embedded-opentype'), 
         url('HelveticaNeue-Light.woff') format('woff'), 
         url('HelveticaNeue-Light.ttf')  format('truetype'),
         url('HelveticaNeue-Light.svg#HelveticaNeue-Light') format('svg');
}

我尝试在我的 .htaccess 文件中插入这段代码:

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

我最终尝试了以下方法，并且成功了:

1. 在地址栏输入“about:config”；
2. 搜索“security.fileuri.strict_origin_policy”并将其设置为 false。

但是，有没有什么方法可以让字体显示出来而不必篡改 Firefox 中的设置？

Answer 1

我在 Firefox 中总是遇到字体渲染问题。尝试为您的文件使用完整的 URL(不带 www)，它在几个月前对我有用。:

@font-face {
font-family: 'HelveticaNeue-Light';
src: url('http://yourwebsite.com/fonts/HelveticaNeue-Light.eot') format('embedded-opentype'), 
     url('http://yourwebsite.com/fonts/HelveticaNeue-Light.woff') format('woff'), 
     url('http://yourwebsite.com/fonts/HelveticaNeue-Light.ttf') format('truetype'),
     url('http://yourwebsite.com/fonts/HelveticaNeue-Light.svg#HelveticaNeue-Light') format('svg');}