字体错误：无法解码下载的字体无效版本标签答案

【问题标题】：Font face error: Failed to decode downloaded font invalid version tag字体错误：无法解码下载的字体无效版本标签
【发布时间】：2017-04-14 04:37:56
【问题描述】：

Environment 是一个 React Nodejs 应用程序

我的 CSS：

@font-face {
  font-family: 'Open Sans';
  src:
    url('/src/public/fonts/OpenSans-Regular.eot'),
    url('/src/public/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
    url('/src/public/fonts/OpenSans-Regular.woff') format('woff'),
    url('/src/public/fonts/OpenSans-Regular.woff2') format('woff2'),
    url('/src/public/fonts/OpenSans-Regular.ttf') format('truetype'),
    url('/src/public/fonts/OpenSans-Regular.svg') format('svg');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Open Sans';
  src:
    url('/src/public/fonts/OpenSans-Semibold.eot'),
    url('/src/public/fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
    url('/src/public/fonts/OpenSans-Semibold.woff') format('woff'),
    url('/src/public/fonts/OpenSans-Semibold.woff2') format('woff2'),
    url('/src/public/fonts/OpenSans-Semibold.ttf') format('truetype'),
    url('/src/public/fonts/OpenSans-Semibold.svg') format('svg');
  font-style: normal;
  font-weight: bold;
} ....

我对 Open Sans 有两个不同的定义，因为 font-style 和 font-weight 取决于诸如粗斜体等元素的附加类，这似乎是 acceptable fomat

用法：

.union {
  font-family: 'Open Sans';
  padding-left: 12px;

  & :global(.bold) {
    font-weight: 700;
  }

  & :global(.italic) {
    font-style: italic;
    font-weight: 400;
  }
}

Webpack 配置：

test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000',

我在 public/fonts 文件夹下有字体文件，直到一天前它都可以正常工作，但现在我们收到大量控制台错误 failed to decode downloaded font invalid version tag 用于 woff 和 ttf 文件。我尝试了其他解决方案 link1 和 link2 但没有帮助。我可以从 Chrome 的网络选项卡下的公共文件夹中看到字体加载得很好

知道为什么还会出现这些错误吗？

【问题讨论】：

标签： css node.js font-face

【解决方案1】：

我可以修复错误。这是几件事的结合..首先是字体文件的路径，我设置的路径好像没有“构建”发生，Webpack 在发布构建后将它们放在/assets 下，所以我不得不更新我从src/public/fonts 到/fonts 的路径，因为在资产文件夹下自动查看构建静态文件+在我的webpack加载器配置中添加正则表达式以支持版本控制+为woff文件添加mimetype

【讨论】：