由于文本渲染，日文字符在 chrome 中显示为框：优化易读性；

Question

在我的网站中，我使用的是 Font-Awesome 库。它在标题标签上应用 css 属性 text-rendering: optimizelegibility;。当 laguage 是日语时，这会破坏我的网站。

正如您在DEMO 中所见，使用此属性时会显示框。我不太明白这个属性是做什么的，那么将它覆盖为 auto 是否安全？

注意：此属性在 Firefox 中运行良好，但在 google chrome 中出现问题。

感谢您的帮助:)

编辑：这个问题是window-XP特有的

我还在 chrome 网站上打开了一个问题：http://code.google.com/p/chromium/issues/detail?id=159391

Answer 1

Font Awesome 使用字体技巧，该技巧基于使用包含标志性图像的字体以特殊字体代替普通字符。这种诡计最有效，因为特殊字体作为可下载字体提供了有关字符支持的错误信息。但我不明白 Font Awesome 与这个问题有什么关系。我在 Font Awesome 包中的 CSS 文件中看不到任何与标题相关的 CSS 代码。如果您的标题元素具有与 Font Awesome 中使用的属性一致的 class 属性，它可能会间接影响标题。在这种情况下，请在此处更改类名。

那里也没有text-rendering 设置。我怀疑该设置来自其他来源。

在任何情况下，都可以安全地删除text-rendering 属性设置（或设置为auto，初始值）。它具有排版性质，已知和有些记录的效果与字距调整和连字有关，无论如何这可能不适用于日语写作。它可能还有其他影响，而且它的规范非常模糊。在某些情况下，Chrome 可能会尝试使用在（某些版本的）Windows XP 中失败的渲染技术。

在虚拟 Windows XP 中测试您的演示，这可能对应于旧的开箱即用 XP，根本不显示日文字符。似乎没有字体包含它们。不同的XP安装可能添加了字体，比如MS Office自带的Arial Unicode MS，然后问题就变了。