为了避免浏览器缓存，我想将版本查询字符串连接到我的@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; }To avoid browser's cache, I want to concat version querystring to my @font-face's url. There are lots of urls. How to this in right way?
@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; }最满意答案
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，该版本号将会更改。
字体真棒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来同时更新所有的版本查询参数fa-version变量。
#iefix
关于#iefix散列，这是一种在单个src定义多种字体格式时，在IE8及以下版本中解决问题的方法。 如果你需要你的字体在IE8和以下版本中工作，你需要添加#iefix （或任何散列），以便这些浏览器不会抛出错误。 更多关于这个SO问题 。
其他@ font-face字体和实现
如果您使用Font Awesome或其他实现以外的字体，则可以在字体路径上追加散列来创建自己的缓存破坏。 查看日期字符串相当常见，例如01302017 ，可以手动更新或在需要时通过构建脚本进行更新。
Most implementations of Font Awesome will append versioned query strings to the @font-face font paths. These versioned query strings will bust the cache when the font is updated to a new version. That is, when you update the font the versioned query string will change from something like ?v=4.7.0 to ?v=4.7.1.
In most cases you won't need to do anything extra as most implementations will handle this for you. Keep in mind, many other @font-face generators and packages will also append a version param. Here are a few examples:
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
Regarding the #iefix hash, this is a method of fixing an issue in IE8 and below when defining multiple font formats within a single src. If you need your font to work in IE8 and below you need to add the #iefix (or any hash`) so those browsers don't throw errors. More on that in this SO question.
Other @font-face Fonts and Implementations
If you're using a font other than Font Awesome, or another implementation, you can append a hash onto the font paths to create your own cache-bust. It's fairly common to see a date string appended, like 01302017, which can be updated manually or via a build script when needed.
更多推荐
发布评论