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;
  }
}

Webpack配置：

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

我有public/fonts文件夹下的字体文件，它在一天前工作正常，但现在我们收到了大量的控制台错误failed to decode downloaded font invalid version tag woff 和< strong> ttf 文件。我尝试了其他解决方案link1和link2，但它没有帮助。我可以在Chrome的网络标签

下的公共文件夹中看到加载的字体

知道为什么还会得到这些错误吗？

Answer 1

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

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

1 个答案: