所有浏览器中的奇怪字体编码答案

【问题标题】：Strange font encoding in all browsers所有浏览器中的奇怪字体编码
【发布时间】：2017-02-06 20:10:55
【问题描述】：

我们遇到了一些编码问题，导致文本在不同的浏览器中看起来不同。在不同的浏览器中考虑这个 jsfiddle：

文本应该看起来像这样：

Apple Museum je první muzeum svého druhu v České republice, 
které bylo nedávno otevřeno v Husově ulici v centru Prahy. 
Můžete zde nahlédnout do nedávné minulosti a vžít se do doby, 
kdy Steve Jobs sestrojil spolu se Stevem Wozniakem v garáži 
svých rodičů první osobní ...

请注意，这不是字体问题，这发生在完全正确的字体上。

Chrome（请注意，它甚至会阻止非变音符号字符，检查单词garáži）：

火狐：

Safari（类似于 Chrome，但不会出现garáži 的问题）：

乍一看，文本看起来是正确的，但似乎存在一些问题。使用我们网站上的 Firefox，它看起来更奇怪 (https://goout.net/cs/muzea/apple-museum/wucb/)：

我的印象是字体实际上是分为字符和变音符号。但是我该如何解决这个问题？有什么算法或工具吗？我们使用的是 Java，所以我们必须在其中实现它。

【问题讨论】：

对于后一个 Firefox 实例：您使用的是什么文本/html 编辑器？ text is not normalised but decomposed。例如，m e ̌ s ̌ t ̌ a n s k e ́ m 而不是 m ě š ť a n s k é m（在相邻字形之间添加空格以正确呈现组合重音符号）。顺便说一句，这个问题属于超级用户……
另见Text run is not in Unicode Normalization Form C。 为提高互操作性，W3C 建议在 Web 上使用 NFC 规范化文本。
此文本只是由我们的编辑从另一个站点复制粘贴的。他们只是普通人，不了解背后的任何技术细节。我需要实现一些东西来修复文本结构，这样我们的编辑就不用担心了。我将它发布在这里而不是超级用户，因为我将实现一个 Java 代码来解决这个问题。我很乐意重新规范化它，但我不知道如何。
Oracle Java Normalizing Text 教程？
我猜您使用的网络字体不包含文本中某些字符的字形。然后浏览器将用另一种字体替换字形。这可以解释不同外观字形的混合。

标签： unicode encoding utf-8

【解决方案1】：

对于后一个 Firefox 实例：the text is not normalised but decomposed 而为了提高互操作性，W3C 建议在 Web 上使用 NFC 规范化文本（请参阅Normalization in HTML and CSS）。

通过 Oracle Java Normalizing Text 教程，我建议使用以下 normalize 方法：

normalized_string = Normalizer.normalize(target_chars, Normalizer.Form.NFC);

例如，单词"Můžete"（复制粘贴来自Apple Museum）中的分解字符可能被错误地呈现为

"M u ̊ z ̌ e t e"（8 个分解字符）而不是
"M ů ž e t e"（6 个预先组合的字符）。

（注意在相邻字形之间添加空格以正确呈现组合重音。）

很遗憾，我无法给出 Java 中normalize 方法的示例；取而代之的是 PowerShell 与 .Normalize 方法相称的示例：

PS D:\PShell> 'Může' | Get-CharInfo | Format-Table -AutoSize -Wrap

Char CodePoint        Category Description           
---- ---------        -------- -----------           
   M U+004D    UppercaseLetter Latin Capital Letter M
   u U+0075    LowercaseLetter Latin Small Letter U  
   ̊  U+030A     NonSpacingMark Combining Ring Above  
   z U+007A    LowercaseLetter Latin Small Letter Z  
   ̌  U+030C     NonSpacingMark Combining Caron       
   e U+0065    LowercaseLetter Latin Small Letter E  

PS D:\PShell> 'Může'.Normalize('FormC') | Get-CharInfo | Format-Table -AutoSize -Wrap

Char CodePoint        Category Description                         
---- ---------        -------- -----------                         
   M U+004D    UppercaseLetter Latin Capital Letter M              
   ů U+016F    LowercaseLetter Latin Small Letter U With Ring Above
   ž U+017E    LowercaseLetter Latin Small Letter Z With Caron     
   e U+0065    LowercaseLetter Latin Small Letter E                

PS D:\PShell>

这里是Python's normalize method：

import unicodedata

unistr = 'Můžete'               # copy-pasted from Apple Museum
print ( 'decomposed', unistr)
print ( 'normalized', unicodedata.normalize('NFC', unistr))

另见this jsfiddle。

【讨论】：