Question

下面（和这个 live demo here ）是生成这两个屏幕截图的HTML。第一个是Windows 10上的Chrome，第二个是iOS 12上的Chrome。

iOS12 screenshot

请注意，Win 10正确地弄平了底线的所有字符并使它们变成红色。但是在最上面的一行中，即使在其他地方（也在Win 10上）我看到它正确地以黄色显示，例如here，它还是错误地不风格化了⚠️。

还要注意，iOS 12正确地设置了所有表情符号的样式，但不变平并且将前两个字符（?︎）涂成红色。

我如何控制（在所有设备和浏览器上）字符是显示为表情符号版本还是文本版本？

这不是其他问题的重复，因为（正如您从HTML中看到的那样）我已经知道了文本变体选择器︎，并且我已经尝试了许多不同的本地字体（例如{ {3}}）和Google字体。

<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<div style='text-align: right; font-family: "Raleway"; margin: auto; display: inline-block; font-size: 22px;'>
    emojis &#127748;
    &#x1F4AC;                    
    &#x231b;        
    &#9889;
    &#9888;
    <div style="color: red;">
        using text variation selector 
        &#127748;&#xfe0e;
        &#x1F4AC;&#xfe0e;
        &#x231b;&#xfe0e;        
        &#9889;&#xfe0e;
        &#9888;&#xfe0e;
    </div>
</div>

Answer 1

简短的答案是您不能这样做。文本变体选择器通常不适用于所有字符。只有在标准中明确定义的序列才有效。实际上，在您的第一个示例中，Windows上的Chrome违反了该标准，因为?和no没有变体顺序。没有Unicode机制可以阻止这些字符像表情符号那样运行。 <U+1F304, U+FE0E> 必须显示与单独U+1F304相同。

所有允许变体选择器的表情符号字符都列在数据文件emoji-variation-sequences.txt中，并且我还在网站上整理了a visual table，以方便访问。

但是，即使对于那些确实支持变体选择器的字符，也不能保证它们会真正起作用。例如，较旧的Android手机无法将许多表情符号显示为文本样式，因为它们只是缺少必要的字体。

如果要确保通用的文本样式显示，则需要提供自己的字体以覆盖系统默认值。

旁注：虽然您的Windows示例错误地选择了变体选择器，但实际上确实正确处理了⚠，因为默认情况下该字符是文本样式，与所有其他字符不同。如果需要表情符号样式的显示，则必须像这样附加表情符号变化选择器U+FE0F：⚠️。 ⌛和⚡不需要（但可能），因为它们是emoji默认值。

如何控制（在所有设备和浏览器上）字符是显示为表情符号版本还是显示为文本版本？

我如何控制（在所有设备和浏览器上）字符是显示为表情符号版本还是文本版本？

1 个答案: