自定义字体在Windows（Chrome）上无法正确显示

Question

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

我通过使用@ 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

Answer 2

大多数浏览器都支持woff / woff2字体格式。

转到SquirrelFonts将一种字体格式转换为所有其他字体格式。该网站还为您提供方便的预制CSS。

您应该添加<div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>或.woff格式来解决问题。

Answer 3

该问题可能与“清除类型”未“启用”有关，Windows 上的 Chrome 显然需要它来更好地呈现字体。这不能解决问题，因为它无法通过 css 和 javascript 进行控制。

在 Windows 上的 Chrome 中试试这个页面：https://fonts.google.com/specimen/Old+Standard+TT 观察未呈现的字体。

然后尝试转到开始 -> 设置 -> 输入“调整 ClearType 文本”，然后在打开的窗口中选中“打开清除类型”。

然后重新启动 Chrome，导航到同一页面并观察字体问题是否已解决。