通过 @font-face 自定义字体在 Firefox 中不起作用

Question

我想在网站上使用自定义字体，我通过 FontSquirrel 进行了管理，使其在 Chrome、Safari 甚至 Internet Explorer 中都能正常工作，但在 Firefox 中却不行。

这是我的代码：

@font-face {
font-family: 'RaspoutineClassic';
src: url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.eot');
src: url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.woff2') format('woff2'),
     url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.woff') format('woff'),
     url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.ttf') format('truetype'),
     url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.svg#raspoutine_classicitalic') format('svg');
font-weight: normal;
font-style: normal;}

这是网站：vukdeveloper.uk.to/klice

我也将此添加到 .htaccess 文件中，但也没有这样的运气。

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

您能否建议任何更改以使其正常工作？

Answer 1

Firefox 正在请求

http://vukdeveloper.uk.to/klice/css/font/RaspoutineClassic.otf
http://vukdeveloper.uk.to/klice/css/font/RaspoutineClassic.woff
http://vukdeveloper.uk.to/klice/css/font/RaspoutineClassic.ttf

每个都得到 404。

它要求这些的原因是，在 http://vukdeveloper.uk.to/klice/css/slicknav.css 中，您有另一个 @font-face 声明相同的字体系列名称，这给出了错误的字体文件路径：

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