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）版本/ 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

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

但是，当包含粗体字体时，我遇到了类似的问题，解决方案不是将字体设置为粗体，而是使其使用不同的名称表现正常，然后使用字体名称切换粗体。 这不是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;
}

Answer 2

我看到你已经使用相同的名称，不同的文件名定义了两次字体Lola，但两个定义都有font-weight:bold;，这显然是一个错字，但可能是浏览器以不同方式解释拼写错误的原因。

尽管如此，我已经看到其他字体，iOS和Android设备使字体权重（没有任何附加参数）甚至本机不同。你的问题的这一部分并不完全清楚，什么机器和什么浏览器引擎创造了哪些结果。