应用font-weight时，设备上的font-face显示不一致

Question

我在iDevices上有字体显示这个问题。当font-weight设置为粗体时，显示范围会更宽广和不同。可能是什么原因？

预期（来自台式机）：

设备（iphone 4S或iPad）：

这是我声明字体的方式：

@font-face {
    font-family: 'ITCAvantGardeGothicBook';
    src: url('/assets/font/avantgarde-book-webfont.eot');
    src: url('/assets/font/avantgarde-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('/assets/font/avantgarde-book-webfont.woff') format('woff'),
         url('/assets/font/avantgarde-book-webfont.ttf') format('truetype'),
         url('/assets/font/avantgarde-book-webfont.svg#ITCAvantGardeGothicBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 1

您的桌面PC可能会在本地安装ITCAvantGardeGothicBook 粗体字体作为单独的ttf文件 - 因此它会按预期呈现粗体。但是，您的网页只能以正常的字体权重提供对font-face的单一引用...因此浏览器必须在iPhone上查看时模拟一个人造粗体。人造粗体永远不会像真正的粗体字一样好。

如果您希望粗体字体看起来很完美，请添加一个单独的粗体字体，并带有指向实际粗体字体的链接。

阅读这篇文章，了解更重要的信息： http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles