通过@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;
}

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

Custom font via @font-face doesn't work in Firefox

css

firefox

font-face