将查询字符串连接到font-face URL

Question

将查询字符串连接到font-face URL

7

为了避免浏览器缓存，我想把版本查询字符串连接到我的@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;
}

- Engineer

我在想，你是否可以找到“查找和替换”选项，并为所有这些链接添加版本号。不是那么简单吗？ - Naveed Ramzan

谢谢。但我不想替换任何内容。我只是想了解那些神奇数字（68400z）和哈希（# iefix）背后的逻辑，它们与URL有什么关系以及如何添加版本。有什么想法吗？ - Engineer

啊，好的没问题。那么这些版本号或代码6840z或任何东西都是为了提及构建编号。在版本号的情况下，我们添加ver=1或1.1或1.1.1表示我们正在处理构建编号1并进行小修复。当我们将要开始下一个迭代或构建时，其版本将从ver=2开始。关于代码，它是从该版本号生成的随机数，只是为了分开。 - Naveed Ramzan

谢谢，#iefix和其他哈希值呢？ - Engineer

那也是一个用于管理版本的代码。有关哈希标签的参考资料：https://www.electrictoolbox.com/download-embed-fonts-font-face/ - Naveed Ramzan

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brett DeWoody · Accepted Answer

大多数 Font Awesome 的实现将在 @font-face 字体路径末尾添加版本化查询字符串。这些版本化查询字符串将在字体更新为新版本时清除缓存。也就是说，当您更新字体时，版本化查询字符串将从类似于 ?v=4.7.0 变为 ?v=4.7.1。

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

Download the Font Awesome kit

If you download the Font Awesome kit from http://fontawesome.io/ the included font-awesome.css file will have versioned query strings attached to the paths. Ex.

@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;
}

the ?v=4.7.0 is the versioned query string. This version number will change if you download a new version of Font Awesome down the road.

Font Awesome CDN

If you use the CDN implementation you'll get a <script> to include, like

This will import the following 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;
}

The URLs to the Font Awesome CDN has the version number included, and this will change when updated, breaking the cache and eliminating the need for appending a versioned query parameter.

Using Sass or Less

If you're using the Less/Sass files the versioned query string will be added. Ex.

@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;
}

The @{fa-version} will append the current version (currently 4.7.0 to the font path. This version number will update when the font is updated. In this sense you can update all the version query params at once by changing the fa-version variable.

关于#iefix哈希值，这是在单个src中定义多个字体格式时解决IE8及以下版本问题的方法。如果需要在IE8及以下版本中使用字体，则需要添加#iefix（或任何哈希值），以免这些浏览器出现错误。更多信息请参见此SO问题。

其他@font-face字体和实现方式：如果您使用的字体不是Font Awesome或其他实现方式，则可以在字体路径后附加哈希值来创建自己的缓存清除。通常会看到附加日期字符串，例如01302017，可以手动更新或通过构建脚本进行更新。