html - 自定义字体无法在 Windows (Chrome) 上正确显示

Question

我有一个简单的静态页面，我想导入一种字体。但是这个字体在Windows 和Google Chrome 浏览器上显示很奇怪。此字体可在其他操作系统和浏览器中正常显示。

我像这样使用@font-face 导入字体:

@font-face {
    font-family: NoyhGeometric;
    src: url("../fonts/Typesketchbook - Noyh Geometric Regular.ttf") format("truetype"),
        url("../fonts/Typesketchbook - NoyhGeometric-Regular.otf") format("opentype");
}

我在两张图片中都使用了 Google Chrome 浏览器。

在 Ubuntu 上(正确显示):

在 Windows 上(显示奇怪):

Answer 1

尝试在你的 css 中添加字体平滑属性

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

引用:https://davidwalsh.name/font-smoothing