html - 字体在浏览器中错误显示

Question

嗨，我在我的 Web 应用程序中使用 Mosk 字体并托管这些字体。字体似乎通过字体和 webpack 文件加载器（.ttfs）正确加载。

@font-face {
    font-family: "Mosk";
    src: url(../_assets/fonts/Mosk_Typeface/Mosk_Medium_500.ttf) format("truetype");
    font-weight: 500;
}

用于 ttfs 的 Webpack 文件加载器。

 {
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: 'static/media/fonts/[name].[hash:8].[ext]'
          }
        }]
      },

这就是字体在浏览器中的显示方式。

您对如何修复它或可能是什么问题有什么建议吗？

我通过使用另一个生成器部分解决了这个问题，但是它并不完全好。我不知道为什么，但是你可以看到下面的图片有些字母比其他字母更粗。

标签： htmlwebpackfontssasswebfonts