Firefox 不显示@font-face 字体

Question

我通过@font-face 将字体嵌入网站。我的代码在 Chrome 和 Safari 中有效，但在 Firefox 中无效，我不知道为什么。这些字体由同一个域托管，我也已经将它们放在根目录中。

这是代码：

@font-face {
   font-family: 'Effra';
   src: url('font/Effra-Regular.eot');
   src: url('font/Effra-Regular.otf') format('opentype'),
        url('font/Effra-Regular.svg') format('svg'),
        url('font/Effra-Regular.eot') format('truetype'),
        url('font/Effra-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

Answer 1

将字体更改为：

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

Answer 2

将字体扩展名 .eot 更改为 .ttf 并包含另一个扩展名为 .ttf

的字体文件

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

Firefox 不显示@font-face 字体

Firefox not displaying @font-face fonts

css

firefox

google-chrome

font-face