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

Posted 2023-03-06

【中文标题】?#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】：

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

【讨论】：

这不回答额外的哈希标签 ( ?# )。原始问题的链接中对此有预感，但含糊不清。

一点也不含糊：在极少数情况下，IE 会失败，因为@font-face 声明的字符太多。在大多数情况下，这可以通过在“？”问号后添加“#”井号来解决。这为您购买了一些额外的空间......只是模糊了为什么它购买了额外的空间。

请注意，有时 .eot 字体在 IE8 中即使使用此修复程序也无法使用（尽管字体在 IE9+ 中可以使用）。如果您遇到此问题，请尝试使用另一个 ttf 到 eot 转换器。

【参考方案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】：

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

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

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

【参考方案4】：

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

【讨论】：

你的意思是它会停止服务器解释之后的任何字符吗？作为查询字符串。

它防止任何查询字符串被附加到 url 的末尾（因为问号后面紧跟一个哈希字符串）。在散列之后，可能添加到 URL 末尾的任何额外问号都将被视为散列的一部分。 @Rexy Hoang 的答案是一个更有用的答案:)