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

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

但是，在包含粗体字体时我遇到了类似的问题，解决方案不是将字体设置为粗体，而是让它以不同的名称正常运行，然后使用字体名称切换粗体。 这不是 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 设备使用其他字体使字体粗细（没有任何附加参数）甚至原生不同。你的这部分问题对我来说并不完全清楚，什么机器和什么浏览器引擎会产生什么结果。