.htaccess - @font-face 仍然不能在 FireFox 中工作。字体类型的问题？

Question

我知道有人问这个问题 here但我已经尝试了提到的解决方案没有影响。

我的 CSS 声明如下:

@font-face { 
      font-family: gillsans; 
      src: url('gillsans.TTF'); 
    } 

这适用于 Chrome 但不适用于 FireFox。

奇怪的是，我有另一个站点使用完全相同的声明但使用不同的字体但它工作正常:

@font-face
{
    font-family: bebas;
    src: url('bebas.TTF');
}

这可能与实际的字体文件有关吗？

我还尝试按照建议修改我的 .htaccess 文件:

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

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

在 FireFox 中同样没有结果。

我已经尝试将 .TTF 更改为 .tff 并提供文件的绝对路径，但仍然没有。

任何人都可以推荐一些我可以尝试的东西吗？

唯一可能的情况是，该站点正在开发中，因此使用的是临时 URL，但我不明白这会对它产生怎样的影响。

Answer 1

尝试其他字体类型，例如 eot、woff 和 svg。要进行转换，您可以使用 http://www.onlinefontconverter.com/

然后在您的样式或 css 文件中尝试此代码:

<style type="text/css">
@font-face {
    font-family:'bebas';
    src:url('bebas.eot');/*IE9 or later*/
    src:local('bebas'),/*check for font installation*/
        local('b ebas'),/*check for font installation in some browsers like Safari*/
        url('bebas.eot?#iefix') format('embedded-opentype'),/*hack for IE8 or earlier*/
        url('bebas.woff') format('woff'),/*new browsers*/
        url('bebas.ttf') format('truetype'),/*all browsers excpet IE*/
        url('bebas.svg#bebas') format('svg');/*old iOs*/
}
.bebas-ft{
    font-family:bebas, Tahoma, Geneva, sans-serif;
}
</style>

也不要为了这么简单的事情修改您的 .htaccess 文件!