css - 字体错误 : Failed to decode downloaded font invalid version tag

Question

环境是 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;
  }
}

网络包配置:

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

我在 public/fonts 文件夹下有字体文件，它在一天前工作正常，但现在我们收到大量控制台错误 无法解码下载的字体无效版本标签 用于 woff 和 ttf 文件。我尝试了其他解决方案 link1 和 link2 但没有帮助。我可以从 Chrome 网络选项卡下的公共(public)文件夹中看到字体加载得很好

知道为什么我仍然收到这些错误吗？

Answer 1

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