ios - IOS Safari 自定义字体渲染

Question

iOS 的 Safari 无法正确呈现自定义字体。这里出了什么问题？

请注意字体的渲染有何不同:在 chrome 中，笔划宽度更粗。在 Safari 中，字符间距更宽。我认为 chrome 的渲染更正确。

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

jsfiddle 上的问题示例:

http://jsfiddle.net/c9eP5/9/

@font-face{
    font-family:Lola;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format('woff');
    font-style:normal;
}
.test {
    font-size: 200%;
    font-family: Lola;
    -webkit-text-size-adjust:100%    
}

它在 Chrome 中的外观:

这是它在 iOS Safari 上的样子(“Mozilla/5.0(iPhone；CPU iPhone OS 6_0_1，如 Mac OS X)AppleWebKit/536.26(KHTML，如 Gecko)Version/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;
}

Answer 1

首先，您将两种字体都标记为粗体，这可能会使某些浏览器感到困惑。

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

http://jsfiddle.net/nothrem/ALqt8/6/

@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;
}