html - 如何控制(跨所有设备和浏览器)字符是显示为表情符号版本还是文本版本?
问题描述
下面(以及这里的现场演示)是生成这 2 个屏幕截图的 HTML。第一个是 Windows 10 上的 Chrome,第二个是 iOS 12 上的 Chrome。
请注意,Win 10 正确地将底行中的所有字符展平并涂成红色。但是在第一行,它错误地没有对⚠️进行样式化,即使在其他地方(也在 Win 10 上)我看到它正确显示为黄色,例如这里。
另请注意,iOS 12 正确地对所有表情符号进行样式化,但不会将前 2 个字符 (︎ ︎) 变平并涂成红色。
如何控制(跨所有设备和浏览器)字符是显示为表情符号版本还是文本版本?
这不是其他问题的重复,因为(正如您从 HTML 中看到的那样)我已经知道文本变体选择器︎
,并且我已经尝试过大量不同的本地字体(例如https://emojisymbols.com)和谷歌字体。
<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 🌄
💬
⌛
⚡
⚠
<div style="color: red;">
using text variation selector
🌄︎
💬︎
⌛︎
⚡︎
⚠︎
</div>
</div>
解决方案
简短的回答是你不能。文本变体选择器通常不适用于所有字符;只有那些在标准中明确定义的序列是有效的。Windows 上的 Chrome 实际上违反了第一个示例中的标准,因为 和 没有变体序列。没有 Unicode 机制可以阻止这些字符表现得像表情符号;<U+1F304, U+FE0E>
必须U+1F304
与单独显示相同。
数据文件emoji-variation-sequences.txt中列出了所有允许变体选择器的表情符号字符,我还在我的网站上整理了一个可视化表格以便于访问。
但是,即使对于那些支持变体选择器的字符,也不能保证它们确实可以工作。例如,较旧的 Android 手机无法将许多表情符号显示为文本样式,因为它们只是缺少这样做所需的字体。
如果要确保通用文本样式显示,则需要提供自己的字体来覆盖系统默认值。
旁注:虽然您的 Windows 示例错误地选择了变体选择器,但它实际上确实正确处理了 ⚠,因为该字符与其他所有字符不同,默认情况下是文本样式。如果您需要表情符号样式的显示,则必须U+FE0F
像这样附加表情符号变体选择器:⚠️。这对于 ⌛ 和 ⚡ 来说不是必需的(但可能),因为它们是表情符号的默认设置。
推荐阅读
- google-apps-script - 如何在谷歌表单中为复选框项目添加图像?
- python - requests-html 在 python 中解析多个标签/类的步骤
- python - 使用 NumPy 函数计算 Pandas 中的加权平均值
- r - 在 igraph 中添加新的顶点属性
- javascript - 如何在 Javascript 中更改此类型的结构
- selenium - JSR223 采样器的 WDS.sampleResult.sampleStart()
- node.js - 将来自用户的消息添加到数组中并随机选择
- flutter - Flutter:如何将 JSON 的元素转换为列表?
- android-studio - 在 Flutter 错误日志中,如何找到日志中命名的对象?
- spring-security - 使用 Spring Webflux 在 Spring AOP 中获取当前登录用户