Question

为了避免浏览器的缓存，我想将版本查询字符串连接到我的aerzte-grid.html的网址。有很多网址。如何以正确的方式？

@font-face

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哈希，这是一种在单个src中定义多种字体格式时解决IE8及以下版本问题的方法。如果您需要在IE8及以下版本中使用您的字体，则需要添加#iefix（或任何哈希值），以便这些浏览器不会抛出错误。更多关于此SO question的内容。

其他@ font-face字体和实现

如果您使用Font Awesome或其他实现以外的字体，则可以在字体路径上附加一个哈希，以创建自己的缓存区。查看附加日期字符串相当常见，例如01302017，可以在需要时手动更新或通过构建脚本进行更新。

Concat查询字符串到font-face网址

1 个答案: