html - Twitter-bootstrap header 标签在 safari 中出现乱码

Question

Possible Duplicate:
Why would html text sometimes appear garbled when viewing on Chrome or Safari on Windows?

在设计过程中，我在浏览器中测试了我的页面一段时间。我注意到标题标签 <h1>通过<h6>在 safari 中无法正确渲染...就像缺少字体一样。我正在运行 twitter-bootstrap，但由于某种原因我无法解决此问题。

老实说，我认为这是我的计算机字体而不是浏览器。

如果我禁用optimizelegibility在 CSS 中，它在 Safari 中工作得很好，但是，我尝试过的所有其他计算机都工作得很好。

body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333333;
    background-color: #222222;
}


h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: inherit;
    font-weight: bold;
    color: inherit;
    text-rendering: optimizelegibility; /*Causing problems */
}

我的 Windows 计算机上什至没有 helvetica Neue，但是我有所有 Neue LT 字体。

更新

好吧，我使用了 font frenzy 并将我的字体恢复到安装了 Windows 的手机。我从来没有使用过 Helvetica Neue，只有 Helvetica Neue LT。

我让它显示正常，但这提出了一个很好的问题。安装这些字体的人会遇到和我一样的问题吗？

我应该尝试使用 fontface 来解决这个问题吗？老实说，我怎样才能做到这一点，这样每个人都不会遇到像我一样的问题。

Answer 1

这本质上是同一个问题吗？ Why would html text sometimes appear garbled when viewing on Chrome or Safari on Windows?

答案(来自链接):

使用旧版本的 Windows 以及旧版本的 Chrome 分支可以轻松地重新创建。 Chrome 4-8 好像有这个问题。出于测试目的，使用 Chrome 4 启动 XP。问题出在 text-rendering: optimizationlegibility。这是旧 Chrome 版本中报告的错误，当使用 woff 字体时将 Optimizelegibility 与 @font-face 结合使用时。如果可以重现问题，尝试去掉vertical-align:baseline看看渲染是否仍然乱码。

---

这里的链接还有一个关于该问题的有趣评论线程:http://code.google.com/p/chromium/issues/detail?id=39017