@font-face IE 不工作答案

【问题标题】：@font-face IE not working@font-face IE 不工作
【发布时间】：2019-01-14 12:52:33
【问题描述】：

当我在我的样式标签上使用它时，字体在 FireFox 和 Google Chrome 和 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 上也不起作用

【问题讨论】：

我认为您缺少 eot src 的格式： url('template/fonts/ae_AlArabiya.eot') format('embedded-opentype') 我不确定它会起作用，但你可以测试一下。
请分享您的项目目录结构。
@HirenDavda 我确定我的目录结构，因为第一个代码运行良好，所有字体都在同一个目录中
截取您的项目目录并与我们分享。所以我们可以找出问题所在。可能是你的字体路径没有正确定义

标签： html css fonts stylesheet webfonts

【解决方案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 */
}

【讨论】：

【解决方案2】：

如果.ttf 在其他浏览器中有效，但在 IE 中无效，这通常表明该字体没有设置“可安装位”。有关更多信息和修复，请参阅 this thread。

【讨论】：