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

Question

为了避免浏览器的缓存，我想将版本查询字符串连接到我的 @font-face 的 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生成器和包也将附加一个版本参数。这里有几个例子:

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

#iefix

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

其他@font-face 字体和实现

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