html - Firefox 和 IE 中使用带有 utf8 的 webfonts 的特殊字符问题

Question

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

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

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

在 BrowserStack 上也对其进行了测试——同样的问题。

那么我该如何解决呢？

Answer 1

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

<strong style="color: #CE5A5A;">Von der Gründung im Musikpark zur Marktführerschaft</strong>

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

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

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

Answer 2

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

string.normalize('NFC')