为啥在 Windows 上的 Chrome 或 Safari 上查看时,html 文本有时会出现乱码?

Posted

技术标签:

【中文标题】为啥在 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 无法容忍的字符问题。另外,您是否要求这些用户提供他们确切的浏览器版本? 不可能是与***.com/questions/5315788/…相关的问题? 如果有人看到这个,您应该让他们查看其他 UTF-8 编码的网站,看看他们是否看到相同的问题。这将允许您检查它是方形问题还是其他问题。 【参考方案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 推荐 &lt;meta charset="utf-8" /&gt; 指定了元标记,它应该指定相同的字符编码,但我会尝试一下。 没关系,你是对的。出于某种原因,当我查看源代码时,我没有发现标签,因为它就在顶部。【参考方案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 解决了这个问题。

【讨论】:

以上是关于为啥在 Windows 上的 Chrome 或 Safari 上查看时,html 文本有时会出现乱码?的主要内容,如果未能解决你的问题,请参考以下文章

为啥我会收到“网站或应用程序上的数据泄露泄露了您的密码。Chrome 建议立即更改您在“SITENAME”上的密码。”

为啥 Files.isHidden(Path) 为 Windows 上的目录返回 false?

使用 Google Chrome 或 Safari 在 Mac 上集成 Windows Auth (NTLM)

为啥 Chrome 上的页面更长? [关闭]

为啥在 Chrome 上的 for 循环中使用 let 这么慢?

为啥标题在带有 chrome 的 android 上的地理定位中保持“空”