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字体

2 个答案: