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

Question

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

@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 生成器和包也将附加版本参数。举几个例子：

1. 下载 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，此版本号将会更改。

2. 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 包含版本号，更新时会更改，从而破坏缓存并消除附加版本化查询参数的需要。

3. 使用 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 到字体路径。此版本号将在字体更新时更新。从这个意义上说，您可以通过更改 @ 一次更新所有版本查询参数987654335@变量。

#iefix

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

其他 @font-face 字体和实现

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