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');
}

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

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

Answer 1

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

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

Bulletproof @ Font-Face语法细微之处

1 个答案: