如何解决css中缓存字体和文件的问题？答案

【问题标题】：How to solve the problem of caching fonts and files in css?如何解决css中缓存字体和文件的问题？
【发布时间】：2022-09-23 19:50:30
【问题描述】：

我使用font icon来显示图标，但是当我更新fonts并为字体添加新图标时，因为字体是cached，它们很难显示，并且必须清空缓存。我怎么解决这个问题？

标签： css reactjs sass scss-mixins

【解决方案1】：

您可以在源代码中使用sass。使用其Random() 功能，如下所示：每次构建源代码时，其version 都会更改，浏览器将调用它without cache。

$version: random(9999);

@font-face {
  font-family: "font-icon";
  src: url("#{$SrcPm}/fonticon.eot?v=#{$version}");
  src: url("#{$SrcPm}/fonticon.eot?#iefix&v=#{$version}")
      format("embedded-opentype"),
    url("#{$SrcPm}/fonticon.ttf?v=#{$version}") format("truetype"),
    url("#{$SrcPm}/fonticon.woff?v=#{$version}") format("woff"),
    url("#{$SrcPm}/fonticon.svg?#afam&v=#{$version}") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

您生成的 CSS 将是：

@font-face {
  font-family: "font-icon";
  src: url('fonticon.eot?v=3889');
  src: url('fonticon.eot?#iefix&v=3889') format("embedded-opentype"), url('fonticon.ttf?v=3889') format("truetype"), url('fonticon.woff?v=3889') format("woff"), url('fonticon.svg?#afam&v=3889') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

【讨论】：