将查询字符串连接到字体 url

Question

为了避免浏览器的缓存，我想将版本查询字符串连接到我的 @font-face 的 url。有很多 url。如何以正确的方式做到这一点？

@font-face {
   font-family: 'fontawesome';
   src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz');
   src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz#iefix') format('embedded-opentype'),
        url('/styles/fonts/fontawesome/fontawesome.ttf?6840zz') format('truetype'),
        url('/styles/fonts/fontawesome/fontawesome.woff?6840zz') format('woff'),
        url('/styles/fonts/fontawesome/fontawesome.svg?6840zz#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
}

Answer 1

Font Awesome 的大多数实现会将版本化查询字符串附加到 @font-face 字体路径。当字体更新到新版本时，这些版本化的查询字符串将破坏缓存。也就是说，当您更新字体时，版本化查询字符串将从类似 ?v=4.7.0 的内容更改为 ?v=4.7.1.

在大多数情况下，您不需要做任何额外的事情，因为大多数实现都会为您处理。请记住，许多其他 @font-face 生成器和包也会附加一个版本参数。这里有几个例子：

下载 Font Awesome 套件

如果您从 http://fontawesome.io/ 下载 Font Awesome 套件，包含的 font-awesome.css 文件将在路径中附加版本化查询字符串。前任。

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

?v=4.7.0 是版本化的查询字符串。如果您下载新版本的 Font Awesome，此版本号将会更改。

Font Awesome CDN

如果您使用 CDN 实现，您将获得一个 <script> 来包含，例如

这将导入以下内容 CSS:

@font-face {
  font-family: 'FontAwesome';
  src: url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.eot');
  src: url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff2') format('woff2'),
    url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff') format('woff'),
    url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.ttf') format('truetype'),
    url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Font Awesome CDN 的 URL 包含版本号，这会在更新时更改，从而破坏缓存并消除附加版本化查询参数的需要。

使用 Sass 或更少

如果您使用 Less/Sass 文件，将添加版本化查询字符串。例如

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
    url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
    url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
  // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

@{fa-version} 会将当前版本（当前 4.7.0 附加到字体路径。此版本号将在字体更新时更新。从这个意义上说，您可以更新所有版本查询参数立即通过更改 fa-version 变量。

#iefix

关于 #iefix 散列，这是解决 IE8 及以下版本在单个 src 中定义多种字体格式时的问题的方法。如果您需要您的字体在 IE8 及更低版本中工作，您需要添加 #iefix（或任何哈希`），这样这些浏览器就不会抛出错误。在此 SO question 中有更多相关内容。

其他@font-face 字体和实现

如果您使用的字体不是 Font Awesome 或其他实现，您可以将散列附加到字体路径以创建您自己的 cache-bust。看到附加的日期字符串是相当常见的，例如 01302017，可以手动更新或在需要时通过构建脚本更新。

将查询字符串连接到字体 url

Concat query string to font-face url

css

font-face

font-family