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

Question

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

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

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

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

那我该怎么办？

Website with the issue

Answer 1

原因是你有一个以分解形式表示的字母“ü”，如“u”后跟一个组合分音符，例如在

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

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

如果您使用W3C HTML5 validator检查页面，您将收到一些警告“文本运行不在Unicode标准化表单C中。”其中至少有一个以分解形式引用“ä”（在“ lädt“，也显示得很糟糕，而且它也应该修复。

当您以预组合形式使用Unicode中存在的字符的分解形式时，例如“ä”和“ü”，文本不在标准化表格C（NFC）中。这不是无效的，但它并不常见，并且可能会导致这样的问题，并且一般的W3C策略（虽然在HTML5 CR中没有说明）有利于NFC。

Answer 2

对于在2019年仍在寻找解决此问题的方法的人，有一个ES6解决方案，那就可以解决您的所有问题：）

string.normalize('NFC')