Question

有没有办法确定unicode兼容性，特别是对于较新的设置？我想使用Unicode 6.0字符❌(❌)，但不确定它与哪些浏览器兼容。在caniuse.com上搜索过，但找不到兼容性表。

Answer 1

这不是浏览器问题。任何浏览器都可以处理字符❌，但是用户需要安装一个具有形状的字体，否则它们会看到某种占位符。

U + 274C的标志符号Cross Mark❌是作为Windows 7捆绑的字体的一部分提供的，至少是我在这里的Android和Ubuntu版本，所以这还不错。如果您需要确定，可以使用具有此字形的嵌入字体。

另外，还有非常古老且受到良好支持的U + 00D7乘法符号×或其他alternatives。

（有些情况下，浏览器 - 或者更具体地说，浏览器使用的文本布局引擎 - 除了具有字体外，还需要了解字符的呈现方式正确但这是因为字符被添加为复杂脚本（如阿拉伯语）的一部分，其中字符会根据上下文改变其形状。不需要关注简单的独立字符，如❌。）

Answer 2

您可以通过以下方式检查是否支持表情符号：

将其渲染为Canvas。
将其大小调整为1 × 1以获得单个像素的平均值。
将该平均值与渲染当表情符号缺失时显示的方形字符时得到的平均值进行比较。

像这样的东西（只是一个起点，它只适用于Chrome）：

＆＃13;

function emojiExists(emoji) { 
  try {
    const canvas = document.createElement('CANVAS');
    const context = canvas.getContext('2d');

    // Set font baseline, size and family:

    context.textBaseline = 'top';
    context.font = '100px sans-serif';

    // Scale so that we get a 1 x 1 representation of the emoji
    // (just an average of all the pixels):

    context.scale(0.01, 0.01);

    // Write the emoji:

    context.fillText(emoji, 0, 0);

    // Just for testing. Uncoment this line and comment context.scale(...);
    // document.body.appendChild(canvas);

    // [0, 0, 0, 42] is the value returned for the rectangle character that shows
    // up for missing emojis:

    return context.getImageData(0, 0, 1, 1).data.join(',') !== '0,0,0,42';
  } catch (err) {
    // Canvas might not be suported...
  }
}

console.log(emojiExists('')); // https://emojipedia.org/smiling-face-with-open-mouth/
console.log(emojiExists('')); // https://emojipedia.org/right-anger-bubble/
console.log(emojiExists('')); // https://emojipedia.org/skateboard/
console.log(emojiExists('')); // https://emojipedia.org/flag-for-china/

＆＃13;

对我而言，使用Chrome Version 63.0.3239.132 (Official Build) (64-bit)，我得到true，true，false，false，但它无法正常使用Firefox浏览器。这似乎是一个已知的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1209480

使用自定义字体或不同的浏览器时，您可能需要调整代码（并更改或动态计算'0,0,0,42'值）。

有没有办法确定Unicode字符浏览器兼容性？

2 个答案: