防弹@Font面语法微妙之处

Question

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

//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 ）。它们是什么意思？

当我在 url 末尾使用不正确的参数时，我会出错吗？
提问原因：我想制作 SASS mixin，帮助我轻松包含由不同资源（icomoon.io、fontello.com 等）生成的自定义字体。

Answer 1

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

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