为什么在 Windows 上的 Chrome 或 Safari 上查看时，html 文本有时会出现乱码？答案

【问题标题】：Why would html text sometimes appear garbled when viewing on Chrome or Safari on Windows?为什么在 Windows 上的 Chrome 或 Safari 上查看时，html 文本有时会出现乱码？
【发布时间】：2011-11-11 18:06:25
【问题描述】：

有时用户报告https://squareup.com 上的文字在他们看来像是胡言乱语（或乱码）……但我们无法重现这一点。

用户报告在 Windows 上使用 Chrome 或 Safari，因此这可能是 webkit 的问题。

以下是在https://squareup.com 上拍摄的三个屏幕截图：

我们当前网站上的pricing page：

【问题讨论】：

这可能与字符编码有关。但是，我在 Chrome 中没有看到这个：screencast.com/t/k7LgQYnbD7FW 尝试@someone 的答案。
您确定问题不在服务器端吗？或许存在 Webkit 无法容忍的字符问题。另外，您是否要求这些用户提供他们确切的浏览器版本？
不可能是与stackoverflow.com/questions/5315788/…相关的问题？
如果有人看到这个，您应该让他们查看其他 UTF-8 编码的网站，看看他们是否看到相同的问题。这将允许您检查它是方形问题还是其他问题。

标签： html css google-chrome fonts safari

【解决方案1】：

也许是自定义字体起作用了？当我在 Firefox 中查看您的网站时，它在 Helvetica Neue 中显示，但在 Chrome 中显示为 ag1，agb

【讨论】：

网站的基本字体是Helvetica Neue，但一旦加载字体文件，fontface 类就会添加到<body> 标记中，然后css 应用agb 字体这是由代码中的@fontface 指令指定的。所以……我不认为这是问题所在。不过谢谢。 =)
在您的屏幕截图中，标题似乎根本没有受到影响。
也不是直接应用font: normal 16px/24px "helvetica neue",helvetica,arial,sans-serif;的注册按钮。
啊，我明白了。感谢您指出这种差异。虽然这可能是原因，但这似乎很奇怪，因为字体属性值应该从具有 font: normal 16px "helvetica neue",helvetica,arial,sans-serif 的 <body> 标记继承。

【解决方案2】：

这可能与字符编码有关。尝试通过将其放在页面的<head> 中来明确指定编码：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

【讨论】：

我已经根据 HTML5 推荐 <meta charset="utf-8" /> 指定了元标记，它应该指定相同的字符编码，但我会尝试一下。
没关系，你是对的。出于某种原因，当我查看源代码时，我没有发现标签，因为它就在顶部。

【解决方案3】：

我没有给你一个确定的答案，但看起来你正在使用 Modernizr 类并在 Chrome 中查看你的 html 节点，它应用了 js fontface 类，这表明自定义字体问题.

【讨论】：

谢谢，但是自定义字体显示没有任何问题。
@Beau Smith：那为什么不使用自定义字体，而不仅仅是说“请使用 Helvetica Neue 或类似的东西”。

【解决方案4】：

他们可能关闭了清除类型。 http://www.microsoft.com/typography/cleartype/tuner/step1.aspx

【讨论】：

【解决方案5】：

这有点摸不着头脑，但您是否考虑过重新生成 @fontface 文件，以防万一存在某种形式的损坏，只有在某些 WebKit 浏览器版本中查看时才会出现？

如果您有，请尝试通过 FontSquirrel 字体生成器运行 TTF：

http://www.fontsquirrel.com/fontface/generator

【讨论】：

【解决方案6】：

使用旧版本的 Windows 和旧的 Chrome 分支可以轻松重新创建。似乎 Chrome 4-8 有这个问题。出于测试目的，请使用 Chrome 4 启动 XP。问题在于 text-rendering: optimizelegibility。这是在使用 woff 字体时使用 optimizelegibility 和 @font-face 时旧 Chrome 版本中报告的错误。如果可以重现问题，请尝试取出垂直对齐：基线，看看渲染是否仍然是乱码。

【讨论】：

code.google.com/p/chromium/issues/detail?id=39017 挖掘铬问题，也发现了这篇文章。我相信，评论 24 与运行 Win XP SP3 32 位的图像有同样的问题。
感谢您的回答。抱歉花了这么长时间才正式接受。享受你的 +25！

【解决方案7】：

在我看来，有问题的文本已应用text-shadow。这是非常前沿的、实验性的、要求苛刻的、不可靠的东西，几乎没有任何视觉价值（例如白色背景上的白色阴影）。

【讨论】：

【解决方案8】：

对此有一个简单的答案 - 您的 css 代码在您的服务器端处理之前表示。我敢打赌您使用某种类型的 css php 或存储库来为该页面提供样式/css/markup/jquery 或外部源。

我建议您设置一些等待状态并检查后期处理或检查您的 ajax/xajax 方法。 :)

希望对你有帮助。

【讨论】：

【解决方案9】：

我遇到了同样的问题，发现问题出在字体上。在多个字体源文件中，第二个偏好是“svg”，更改为 truetype 解决了这个问题。

【讨论】：