IOS Safari上的自定义字体呈现

Safari for

iOS

呈现自定义字体的效果很差。这里怎么了

请注意字体的呈现方式有多不同：在chrome中，笔划宽度更粗。在Safari中，字符的间距更大。我认为chrome的渲染更正确

更新：到目前为止，我采纳了答案中的建议，但没有解决问题。我已经更新了JSFIDLE和屏幕截图。现在我不使用粗体或任何默认的粗体标记，只使用一种正常重量的字体。我采纳了@Vizllx的建议，尽管它似乎没有帮助

JSFIDLE上的问题示例：

它在Chrome中的外观：

下面是它在

iOS

Safari（“Mozilla/5.0（iPhone；CPU iPhone OS 6_0_1，类似Mac OS X）AppleWebKit/536.26（KHTML，类似Gecko）版本/6.0 Mobile/10A523 Safari/8536.25”）上的表现

在实际问题中，我使用常规fontsquirrel字体声明：

@font-face {
    font-family: 'Lola';
    src: url('../fonts/lola/lola.eot');
    src: url('../fonts/lola/lola.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lola/lola.woff') format('woff'),
         url('../fonts/lola/lola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

---

我看到你用相同的名字，不同的文件名定义了两次字体Lola，但是两个定义都有

字体权重：粗体

这显然是一个输入错误，但可能是浏览器对输入错误进行不同解释的原因

---

尽管如此，我看到iOS和Android设备使用其他字体时，字体的重量（没有任何附加参数）甚至与本机字体有所不同。我不太清楚您的问题的这一部分，是什么机器和什么浏览器引擎创建了什么结果。

首先，您将两种字体都标记为粗体，这可能会混淆某些浏览器

但是，我在包含粗体字体时遇到了类似的问题，解决方案不是将字体设置为粗体，而是使用不同的名称使其正常工作，然后使用字体名称切换粗体。这不是HTML的标准方式，但它是有效的

---

对于windows上的safari，我们看到了相同的问题，但是“-webkit字体平滑：抗锯齿；”修复了它：仍在寻找safari ios修复程序。谢谢，我更新了Q删除了所有重量问题-此问题仅在正常重量时发生。我在chrome和safari中尝试了你的例子，虽然两者都显示为粗体，但在渲染方面仍然存在显著差异。也许你也应该尝试添加其他格式，例如，在现实世界中，我确实如此。没有帮助。请参阅我对带有源css的Q的更新。编辑：没有帮助。chrome或safari不支持TTF。显然，他们会使用eot，但问题是相同的。我还没试过svg，我想我应该试一下。唉。好吧，我没想到这一点，TTF是iOS的坏例子。但我的意思是，您应该按照EOT、SVG、TTF、OTF、WOFF的顺序包括所有可用的字体。如果你这样做了，但它仍然不起作用，这可能是操作系统版本中的一个问题（我在iOS7中尝试过，它似乎起作用了）。谢谢Christian。我简化了示例以避免所有重量问题-问题仍然存在。希望我对Q的更新能让它更清晰。谢谢你注意到重量的问题。

@font-face {
    font-family: 'Lola';
    src: url('../fonts/lola/lola.eot');
    src: url('../fonts/lola/lola.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lola/lola.woff') format('woff'),
         url('../fonts/lola/lola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family:Lola;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format('woff');
}
@font-face{
    font-family:Lola-bold;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola_bold.woff) format('woff');
}
h1 {
    font-family: Lola-bold;
}