internet-explorer - IE8 @font-face 在不仅定义 eot 时不起作用

Question

在这种情况下，一切正常，字体显示正确：

@font-face {
    font-family: 'CalibriRegular';
    src: url('fonts/calibri.eot');
}

但是当我添加其他格式时，IE8中不显示字体：

@font-face {
    font-family: 'CalibriRegular';
    src: url('fonts/calibri.eot');
    src: url('fonts/calibri.eot') format('embedded-opentype'),
         url('fonts/calibri.woff') format('woff'),
         url('fonts/calibri.ttf') format('truetype'),
         url('fonts/calibri.svg#CalibriRegular') format('svg');
}

有什么问题？谢谢

Answer 1

当我过去使用@font-face过时，我使用过以下内容；

@font-face {
    font-family: 'webfontregular';
    src: url('../fonts/font.eot');
    src: url('../fonts/font.eot?#iefix') format('embedded-opentype'),
         url('../fonts/font.woff') format('woff'),
         url('../fonts/font.ttf') format('truetype'),
         url('../fonts/font.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

我能看到的唯一区别是#iefix附加到第二个.eot声明的末尾。这能帮你解决吗？我从来没有遇到过使用 IE7+ 的问题。

Answer 2

您需要?#iefix在多个 src 列表中出现的 eot 上使用哈希，通常是为了约定。这就解释了为什么： #iefix 如何解决 IE6-IE8 中的网络字体加载问题？

@font-face {
    font-family: 'CalibriRegular';
    src: url('fonts/calibri.eot');
    src: url('fonts/calibri.eot?#iefix') format('embedded-opentype'),
         url('fonts/calibri.woff') format('woff'),
         url('fonts/calibri.ttf') format('truetype'),
         url('fonts/calibri.svg#CalibriRegular') format('svg');
}