Bulletproof @Font-Face 语法细节答案

【问题标题】：Bulletproof @Font-Face syntax subtletiesBulletproof @Font-Face 语法细节
【发布时间】：2014-03-08 03:25:41
【问题描述】：

我很抱歉我所犯的错误，我不是英国人。我想找出这两个例子之间的区别：

//generated by icomoon.io
@font-face {
  font-family: icomoon;
  src:url('font.eot?-w9xgwa');
  src:url('font.eot?#iefix-w9xgwa') format('embedded-opentype'),
  url('font.woff?-w9xgwa') format('woff'),
  url('font.ttf?-w9xgwa') format('truetype'),
  url('font.svg?-w9xgwa#icomoon') format('svg');
}

//generated by my Sass mixin
@font-face {
  font-family: icomoon;
  src: url('font.eot');
  src: url('font.eot?#iefix') format('embedded-opentype'),
  url('font.woff') format('woff'),
  url('font.ttf') format('truetype'),
  url('font.svg#icomoon') format('svg');
}

这两个示例都可以正常工作并且图标都正确呈现，但我对附加在每个字体 URL 末尾的参数有一些疑问（例如：font.ext?-blabla 或 font.ext#blabla）。它们是什么意思？

在网址末尾使用不正确的参数是否会出错？
问问题的原因：我想制作 SASS mixin，它可以帮助我轻松地包含由不同资源（icomoon.io、fontello.com 等）生成的自定义字体。

【问题讨论】：

有很多网站解释了“防弹”系统的目的和工作原理。 readableweb.com/mo-bulletproofer-font-face-css-syntax 例如。是的，有几种这样的方案；如果这两个都适用于所有浏览器，请选择！
至于不是英国人，没关系。这个网站上很少有英国人！（但平均而言，他们享有很高的声誉。）
对不起，这篇文章对我来说绝对没用，因为它没有给我任何关于url末尾参数的解释。

标签： css fonts sass less frontend

【解决方案1】：

Icomoon 附加查询字符串参数（? 之后的所有内容，在本例中为 -w9xgwa），以区分您提供的字体与其他生成的字体，或者更有可能在更新字体时破坏缓存。您的字体在提供给用户时可能会被缓存（因此他们不必在每次查看您的页面时都下载它）。附加查询字符串并更改它会导致用户代理再次下载它。

我建议对 icomoon 生成的 css 进行硬编码，并在更新字体时更改它。如果您不打算更改它（或需要破坏查看您字体的用户的缓存），那么使用 mixin 生成的版本可能没问题。

【讨论】：

太棒了！它适用于包含css吗？例如：
是的，这也有效。如果您记得每次更改样式表时都更改随机字符串。