Question

这是我的CSS：

@font-face {
    font-family: 'avant-garde-gothic-lt-extra-light-v3';
    src: url('itc-avant-garde-gothic-lt-extra-light.eot'); /* IE9 Compat Modes */
    src: url('itc-avant-garde-gothic-lt-extra-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('itc-avant-garde-gothic-lt-extra-light.ttf') format('truetype'), /* Safari, Android, iOS */
         url('itc-avant-garde-gothic-lt-extra-light.woff') format('woff'), /* Modern Browsers */
         url('itc-avant-garde-gothic-lt-extra-light.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

.region-content p {
    font-family: "avant-garde-gothic-lt-extra-light-v3";
    font-style: normal;
    font-weight: bold;
}

我在这里使用此答案格式Internet Explorer 11 and supported web fonts。

适用于Chrome，Firefox和Edge，但不适用于IE11。 IE11加载显示字体名称等的CSS，但不会渲染字体的设计。控制台上没有错误。

如果它是相关的，我试图通过@ font-your-face模块导入字体来使用Drupal 7 Bootstrap子主题。

更新：最初我只有.ttf字体，如果有帮助，我尝试将其转换为其他格式的font2web.com和fontsquirrel.com。

Answer 1

注意一件事：
如果css中的font-family条目的名称与字体名称不同，则字体在IE中不起作用！这个错误让我整天想弄清楚，如果你不了解它，可能会非常令人沮丧。

尝试删除font-family末尾的-v3：

@font-face {
    font-family: 'avant-garde-gothic-lt-extra-light';
    src: url('itc-avant-garde-gothic-lt-extra-light.eot'); /* IE9 Compat Modes */
    src: url('itc-avant-garde-gothic-lt-extra-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('itc-avant-garde-gothic-lt-extra-light.ttf') format('truetype'), /* Safari, Android, iOS */
         url('itc-avant-garde-gothic-lt-extra-light.woff') format('woff'), /* Modern Browsers */
         url('itc-avant-garde-gothic-lt-extra-light.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

如果这不起作用，请找出正确的字体全名，并在font-family中使用它，清除缓存，关闭浏览器，重新打开并测试。

我的网页字体无法在IE11上呈现

1 个答案: