Question

当我在样式标签上使用此字体时，字体可以在FireFox和Google Chrome And Edge上正常使用：

@font-face {
    font-family: 'AlArabiyaRegular';
        src :url('template/fonts/ae_AlArabiya.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

但是它在IE上不起作用，所以我对此进行了仔细研究，看起来我必须使用'woff'和'eot'才能使其与IE一起工作，所以我使用了以下代码：

@font-face {
    font-family: 'AlArabiyaRegular';
  src: url('template/fonts/ae_AlArabiya.eot');
  src: url('template/fonts/ae_AlArabiya.woff') format('woff'), 
       url('template/fonts/ae_AlArabiya.tff') format('truetype'), 
       url('template/fonts/ae_AlArabiya.svg#webfontg8dbVmxj') format('svg');
}

但是当我更改样式时，即使在FireFox上也无法使用

Answer 1

使用所有css字体家族src的可能性：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 2

如果.ttf在其他浏览器上可运行，但在IE上无法运行，则通常表明该字体没有设置“可安装位”。有关更多信息和修复程序，请参见this thread。

@ font-face IE无法正常工作

2 个答案: