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

标签 html css cross-browser twitter-bootstrap

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

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

enter image description here

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

如果我禁用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 来解决这个问题吗?老实说,我怎样才能做到这一点,这样每个人都不会遇到像我一样的问题。

最佳答案

这本质上是同一个问题吗? 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

关于html - Twitter-bootstrap header 标签在 safari 中出现乱码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10393357/

相关文章:

android - Webview 在加载本地 HTML 文件时显示空白页面

html - 将文本文件转换为 html 输出,以便可以以表格格式打印数据

css - HTML Div Float 不会居中

css - 数据表在标题过滤器上添加自定义选择

javascript - 在多个浏览器中附加事件

cross-browser - Chrome 中的 CSS 像素完美

javascript - AngularJS 无法设置文本区域的值

css - 我想制作幻灯片

javascript - <noscript> 或其他

html - div 在移动设备上的定位不正确