html - 由于文本渲染,日文字符在 Chrome 中显示为方框 : optimizelegibility;

标签 html google-chrome css internationalization text-rendering

在我的网站中,我使用 Font-Awesome图书馆。它在 header 标签上应用了 css 属性 text-rendering: optimizationlegibility;。当语言是日语时,这会破坏我的网站。

正如您在 DEMO 中看到的那样,使用此属性时会显示框。我不太明白这个属性的作用,那么将它覆盖为 auto 是否安全?

注意:此属性在 Firefox 中工作正常,但在 google chrome 中出现问题。

感谢您的帮助:)

编辑:此问题特定于 window-XP

我还在 Chrome 网站上提出了一个问题:http://code.google.com/p/chromium/issues/detail?id=159391

最佳答案

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,然后问题就会发生变化。

关于html - 由于文本渲染,日文字符在 Chrome 中显示为方框 : optimizelegibility;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13229976/

相关文章:

jquery - 所有分辨率的CSS定位元素

angular - 窗口打开功能有效,但立即关闭新打开的窗口

css - @font-face 图标在 Chrome-Ubuntu 中不起作用

html - 尝试使 SVG 高度响应

javascript - 如何创建一个出现在点击菜单项上的框?

html - 显示输入类型日期的占位符文本

javascript - Chrome 开发工具中的非事件断点

javascript - 使用javascript设置图像不透明度

c# - 从母版页获取列表项

jquery - 带有 jQ​​uery Waypoints 的 Chrome 和 Opera 中复选框的非常奇怪的行为