Firefox 和 IE 中使用带有 utf 8 的 Web 字体的特殊字符问题答案

【问题标题】：special chars issue in firefox and IE using webfonts with utf8Firefox 和 IE 中使用带有 utf 8 的 Web 字体的特殊字符问题
【发布时间】：2013-10-31 10:36:08
【问题描述】：

我对使用 UTF-8 编码和字体“Lato”和“Open Sans”的字符 ü 有疑问。

使用 safari 和 chrome 没问题，但是当我在 Windows 或 Mac 或 IE 上使用 Firefox 时，问题可以在这里看到：

“Lato”和“Open Sans”是来自 Google 的网络字体 - Helvetica 是本地字体。

也在 BrowserStack 上测试过——同样的问题。

那我该如何解决呢？

【问题讨论】：

标签： html firefox unicode webfonts

【解决方案1】：

对于 2019 年仍在寻找解决这个问题的人来说，有一个 ES6 解决方案，这将解决你所有的问题 :)

string.normalize('NFC')

【讨论】：

【解决方案2】：

原因是您将字母“ü”表示为分解形式，如“u”后跟一个组合分音符号，例如在

<strong style="color: #CE5A5A;">Von der Gründung im Musikpark zur Marktführerschaft</strong>

将“ü”（U+0075 拉丁小写字母 U U+0308 COMBINING DIAERESIS）替换为“ü”U+00FC 拉丁小写字母 U 与 DIAERESIS。它们可能看起来完全一样，但它们可能不一样——在这种情况下，它们不会，因为 Lato 不包含 U+0308，所以浏览器会从 Arial 或其他字体中选择它，从而导致排版灾难。

如果您检查带有W3C HTML5 validator 的页面，您会收到一些警告“文本运行不在 Unicode 规范化表单 C 中”。其中至少有一个是分解形式的“ä”（在“lädt”中，也显示不好），也应该修复它。

当您对 Unicode 中以预先组合形式存在的字符（例如“ä”和“ü”）使用分解形式时，文本不在规范化形式 C (NFC) 中。这本身并不是无效的，但它并不常见，并且可能会导致这样的问题，并且支持 NFC 是一般的 W3C 政策（尽管在 HTML5 CR 中没有说明）。

【讨论】：