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

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

Brett DeWood.. 6

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实现,您将获得


围脖上的博博_771
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
• ajax
• bootstrap
• chart
• chrome
• css
• css3
• firebug
• firefox
• html
• html5
• javascript
• jquery
• json
• node.js
• npm
• postman
• vue.js
• webkit
RankList | 热门文章
• 1将第一个列表的元素分配给另一个列表/数组
• 2如何引用其他.jsx文件中定义的组件
• 3如何在bash脚本中使用'history-c'命令？
• 4在laravel刀片模板中爆炸字符串
• 5rbenv:未安装版本"2.2.3"(由RBENV_VERSION环境变量设置)
• 6Laravel - 从设置表中设置全局变量
• 7检查给定变量的最佳方法是NaN与否？
• 8Java 8 CompletableFuture与Netty Future
• 9可以将以下IF-ELSE块压缩成单个IF语句吗？
• 10在多对多关系中的多个连接条件
• 11如何将数据表值从整数转换为字符串
• 12Beego控制器中的JSON响应
• 13榆树是否支持美元运算符($)？
• 14误报"词法声明需要ECMAScript 6"和"TypeScript 1.x功能.当前语言为1.4"错误消息
• 15如何使glyphicon作为提交按钮工作？
• 16PubNub安全反对某人逆向工程Android应用程序
• 17Symfony控制器中动作的含义
• 18如何在调用moveTaskToBack()时禁用Activity的动画？
• 19如何生成具有特定长度限制的所有可能组合中的字母？
• 20在Luigi Orchestrator中并行化任务