字体显示不正确，使用@font-face答案

【问题标题】：Font is not displaying correctly, using @font-face字体显示不正确，使用@font-face
【发布时间】：2020-10-22 09:00:05
【问题描述】：

我正在尝试为网站使用一种字体。字体文件正在正确加载（我可以在我的网络选项卡中看到该文件），但是它没有正确显示。我已经使用 font-face 来导入字体，下面的样式规则如下，

@font-face{
    font-family: 'BwGradual-Thin';
    src:    url('../fonts/BwGradual-Thin.otf') format('opentype'),
            url('../fonts/BwGradual-Thin.woff'),
            url('../fonts/BwGradual-Thin.eot'); 
}

@font-face{
    font-family: 'BwGradual-Regular';
    src:    url('../fonts/BwGradual-Regular.otf') format('opentype'),
            url('../fonts/BwGradual-Regular.woff'),
            url('../fonts/BwGradual-Regular.eot');
  }

我在下面附上了 2 个屏幕截图，第一个带有正确加载的字体文件的网络选项卡，它显示了所有字符应如何使用字体显示。第二个屏幕截图是字体在网站上的显示方式。只有 't' 字符正确显示。

Dev Tools Network Tab

Heading Screenshot

任何帮助将不胜感激。

【问题讨论】：

我看没问题，好像应用正确了？我假设 art 这个词在 <strong> 标记内，使其变为粗体？
@JuliusGuevarra 如果您查看“r”字符和“W”字符，它们与字体文件中的字符不匹配。
您是否尝试过使用 Photoshop 中安装的字体来查看它们的区别？或者尝试在css中应用字体平滑-webkit-font-smoothing: antialiased;
@JuliusGuevarra 感谢您的坚持。我有一个团队图形设计师提供给我的草图文件，其中的字符按照 .otf 文件的定义显示。我已经尝试了所有 -webkit-font-smoothing 选项，但目前没有成功。

标签： css fonts font-face

【解决方案1】：

我仍然不确定为什么上面的方法不起作用，但是我已经让字体正确显示了。我的解决方案是；

用 .ttf 替换 .otf 文件（使用 CloudConvert 转换）
在字体中，将所有字体声明为同一个系列，即font-family: 'BwGradual' 然后声明每种类型的字体粗细。即 100,200,400 等
设置-webkit-font-smoothing:antialiased。（这不适用于 .otf 文件类型。）

非常具体的问题，不确定是否对以后的使用有用，但希望对您有所帮助。

【讨论】：