iOS Safari 无法正确渲染特定字体

Question

我需要在我的项目中使用 Machauer 字体。在桌面 (Chrome/Safari) 上它可以正确呈现，但在 iOS (iPhone/iPad) 上则无法正确呈现。

奇怪的是，在字体的下载页面上也发生了同样的问题 - 除了文本区域。字体以正确的方式显示其所有详细信息。我想知道那里有什么不同。

带有文本区域的网站

文本区域正确显示：

这就是它在文本区域之外的渲染方式：

我尝试了不同的选项，例如文本渲染或字体平滑 - 它对 iOS Safari 没有影响。

这就是我指定字体并使用它的方式：

@font-face {
font-family: 'Machauer';
src: url(fonts/machauer.ttf) format('truetype');
font-weight: normal;
}

h1 {
font-family: 'Machauer';
text-rendering: geometricPrecision;
}

Answer 1

同时我尝试了一些其他解决方案。我找到了这个

我刚刚在我的 h1 中添加了 font-weight: 100，这样浏览器就不会尝试人为地加粗字体，并且知道它需要保持细长（或者在这种特定情况下是装饰字体）。