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

Question

我正在尝试为网站使用一种字体。字体文件正在正确加载（我可以在我的网络选项卡中看到该文件），但它没有正确显示。我已经使用 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

如有任何帮助，我们将不胜感激。

Answer 1

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

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

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

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

Font is not displaying correctly, using @font-face

css

fonts

font-face