CSS字体“？#iefix”[重复]

Posted 2023-02-21

【中文标题】CSS字体“？#iefix”[重复]

【英文标题】：CSS Font Face "?#iefix" [duplicate]

【发布时间】：2012-12-21 20:37:55

【问题描述】：

我有一个关于 css @font-face 的问题。我正在使用本网站 (http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax) 中的以下代码。

@font-face 
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');

为什么“url('myfont-webfont.eot?#iefix')”行末尾有“#iefix”？

【参考方案1】：

这是因为 IE8 及以下版本解释字体声明的方式。正常的url('myfont-webfont.eot')在这些版本的IE中会导致404 Server错误；添加?#iefix 修复了服务器问题。 （出于同样的原因，IE 有条件样式表。）

根据 Fontspring（直接来自源）：

Internet Explorer

所以需要的部分是?;我想#iefix 只是程序员的语义线，浏览器不会以任何特定方式解释。

如果您愿意，这里有更多信息：https://github.com/stubbornella/csslint/wiki/Bulletproof-font-face。

【讨论】：

谢谢。这有助于清理一些东西。

如果在? 之后使用#iefix，则结束查询字符串并开始URL fragment。我不知道这是否是有意的，但它可能会避免剩余的urls 命中任何browser/server querystring limitations 的问题。

有趣。上船了！

对于需要缓存破坏策略的开发人员，使用重写规则或文件名更改是唯一的选择，因为file.eot?v1 将不起作用..

查看 Font Awesome 的 css 行为，似乎较新的 IE 仍然遵循相同的解析规则。使用 Fiddler，我看到 IE 11 进入了 ../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0 规则，而 Chrome 和 Firefox 避免了它。