android - CSS 引用手机的表情符号字体？

Question

我想在我的网页中使用这个特定的表情符号 🔍 - 🔍

在 Android 上，浏览器将 Unicode 字形识别为表情符号并显示。

在桌面上它呈现为 Unicode 后备字符 - 一个带有数字的小方 block 。

因此，使用 Symbola、Quivira 或任何其他带有正确符号的字体，我可以解决这个问题。

@font-face {
    font-family: 'quiviraregular';
    src: url('fonts/quivira.woff2') format('woff2');
}

body{
 font-family:sans-serif,quiviraregular;
}

但是，现在 Android 显示字体中的符号，不是表情符号。

有什么方法可以设置 font-family 声明，以便 Android(和 iPhone)将使用其内置颜色 Emoji 而所有其他浏览器将使用提供的符号字体？

Answer 1

Modernizr 具有用于表情符号支持的(非核心)功能检测。如果您创建自己的 build of Modernizr with cssclasses and emoji您可以使用添加到 html 标签的 .no-emoji 类来拥有不同的 font-family。

body {
    font-family: sans-serif;
}

.no-emoji body {
    font-family: sans-serif, emojisymbols;
}

我创建了一个 jsFiddle 如果您有表情符号支持，则显示绿色背景，红色背景和 Kenichi Kaneko's EmojiSymbols字体如果没有表情符号支持。不幸的是，我只能看到 EmojiSymbols 字体在 Windows 7 + Firefox 上工作，但这可能会给你一个开始。

根据评论更新

要查看支持检测特定字符的可能性，让我们看一下 Modernizr 的功能检测 source code for emoji support :

define(['Modernizr', 'createElement', 'test/canvastext'], function( Modernizr, createElement ) {
  Modernizr.addTest('emoji', function() {
    if (!Modernizr.canvastext) return false;
    var node = createElement('canvas'),
    ctx = node.getContext('2d');
    ctx.fillStyle = '#f00';
    ctx.textBaseline = 'top';
    ctx.font = '32px Arial';
    ctx.fillText('\ud83d\udc28', 0, 0); // U+1F428 KOALA
    return ctx.getImageData(16, 16, 1, 1).data[0] !== 0;
  });
});

它的工作原理是创建一个 canvas 元素，渲染 🐨 考拉表情符号并检查特定像素的红色 channel 值，我假设该像素的每个再现中都存在。

您可以扩展此功能以检查是否支持参数列表中的所有表情符号，如果不支持则使用表情符号字体回退。我认为最好的解决方案是在同一个 Canvas 中渲染每个表情符号，并检查每个表情符号的边界框内是否至少有一个像素着色。我不确定如何呈现不受支持的表情符号，可能需要检测到这一点。

P.S. 因为我假设在后备表情符号字体之前指定表情符号的默认字体应该足以解决这个问题，我假设这些表情符号不存在于默认字体？