Textarea cols不正确显示表情符号

Question

我有一个10列的文本区域，但显然不足以显示10个表情符号。

如何计算显示10个表情符号所需的cols的确切数量？

<textarea cols="10" rows="4"></textarea>

Answer 1

这是因为对于表情符号，由于第一种字体无法处理表情符号，因此计算出的字体会退回到font-family上的下一个字体。参见this answer。

请参见下面针对Chrome和Firefox的[ubuntu 18.04]代码呈现的结果，以及在每种情况下使用的字体：

<textarea cols="10" rows="6">0123456789
??????????
??????????</textarea>

解决方案：在页面上添加支持表情符号的字体，并将其放在font-family的开头，或者为每个要使用的浏览器添加表情符号默认字体：< / p>

<textarea rows="6" style="width:10ch;overflow:hidden;resize:none;font-family:Twemoji Mozilla,Noto Color Emoji">
0123456789
??????????
??????????</textarea>