关于Uinicode的一个“有趣的”事情

本文作者：IMWeb 黄龙 原文出处：IMWeb社区 未经同意，禁止转载

故事是这样开始的

• 产品K： 为什么我们的网站不能显示火星文?
• 开发L： 什么样的火星文？
• 产品K： ྊ你̆ូ们̆ូ城̆ូ里̆ូ人̆ូ真̆ូ会̆ូ玩̆ូ 类似这样的
• 开发L： 这是啥，看不清啊。
• 产品K： 我给你截图

• 产品K： 你看知乎上是显示正常的
• 开发L： 哦,那我看看

作为一个技术很一般的前端很快发现这个和知乎的font-family的设置有关系，因为它设置了PingFang SC字体。作为一个喜欢问问题的前端那就要问 问题一：为什么其它字体显示就不正常PingFang SC字体就可以呢？

这̀是̀什̀么̀鬼̀（这是什么鬼？）

uinicode里面叫结合附加符号 https://unicode-table.com/cn/blocks/combining-diacritical-marks/ 它与中文在一起的时候就会有奇怪的现象。如果是英文例如：i̲̅m̲̅w̲̅e̲̅b̲̅ 还是可以正常显示的。

var str = '这\u0300是\u0300什\u0300么\u0300鬼\u0300';
console.log(str);

点这里可以尝试一下 https://repl.it/G9yY/0

问题二：为什么英文是正常的？

ฏ๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้๎๎๎๎๎๎๎๎๎๎้้้้้้้้้้ 这个又是怎么回事？

结合附加符号叠加 就会出现这个结果。

问题三：为什么它可以叠加？

文章中留下的三个问题留到下回分解

参考文章

• x是个什么符号？ https://www.zhihu.com/question/20741458
• Unicode®字符百科 https://unicode-table.com/cn/blocks/combining-diacritical-marks/
• 每个JavaScript开发人员应该知道的Unicode https://rainsoft.io/what-every-javascript-developer-should-know-about-unicode/