?#iefix 如何解决 IE6-IE8 中的网页字体加载问题?

Posted

技术标签:

【中文标题】?#iefix 如何解决 IE6-IE8 中的网页字体加载问题?【英文标题】:How does ?#iefix solve web fonts loading in IE6-IE8? 【发布时间】:2011-12-24 10:31:12 【问题描述】:

网络上有很多这样的文章:http://www.fontspring.com/blog/fixing-ie9-font-face-problems 建议在eot url 中添加?#iefix。我很想知道如何解决这个问题。谢谢。

【问题讨论】:

【参考方案1】:

完全意识到这是一个老问题。

但是对于那些来这里寻找什么版本的“那个”浏览器需要这个 hack 的人来说,如果你不支持 IE

因此,只需摆脱它,只需一行即可枚举您提供的所有格式的所有字体。

【讨论】:

【参考方案2】:

您可以做任何事情来代替?#iefix:基本目标是在@Rexyz 已经回答的URL 中的第一个字体文件之后放置?#something

@font-face 
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#FooAnything') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, android, ios */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

【讨论】:

.otf 字体是否也适用于 Safari、Android、iOS?【参考方案3】:

?#iefix 用于阻止浏览器将? 之后的任何字符解释为查询字符串,从而防止另一个可能的服务器错误。

【讨论】:

你的意思是它会停止服务器解释之后的任何字符吗?作为查询字符串。 它防止任何查询字符串被附加到 url 的末尾(因为问号后面紧跟一个哈希字符串)。在散列之后,任何可能添加到 URL 末尾的额外问号都将被视为散列的一部分。 @Rexy Hoang 的答案是一个更有用的答案:)【参考方案4】:

IE8 和更早版本的 src 属性的解析器中存在错误。因此,如果您在 SRC 中包含超过 1 种字体格式,IE 将无法加载它并报告 404 错误。 问号解决了这个问题,因为它使 IE 认为字符串的其余部分(其他 src)是查询字符串,因此只加载 EOT 文件... 其他浏览器将遵循规范并仅加载所需的字体类型... 您可能想阅读 Paul Irish 的 Bulletproof @font-face syntax 以了解更多其他原因...

【讨论】:

这不回答额外的哈希标签 ( ?# )。原始问题的链接中对此有预感,但含糊不清。 一点也不含糊:在极少数情况下,IE 会失败,因为@font-face 声明的字符太多。在大多数情况下,这可以通过在“?”问号后添加“#”井号来解决。这为您购买了一些额外的空间......只是模糊了为什么它购买了额外的空间。 请注意,有时 .eot 字体在 IE8 中即使使用此修复程序也无法使用(尽管字体在 IE9+ 中可以使用)。如果您遇到此问题,请尝试使用另一个 ttf 到 eot 转换器。

以上是关于?#iefix 如何解决 IE6-IE8 中的网页字体加载问题?的主要内容,如果未能解决你的问题,请参考以下文章

阿里iconfont引入方法

iconfont的引入方法

IE6-IE11兼容性问题列表及解决办法总结

css中src: url('iconfont.eot?#iefix') format('embedded-opentype')啥意思?

在AI里面做好的svg图片,导出上传至iconfont,显示有问题

让IE6-IE8 支持HTML5