CSS参考手机的表情符号字体？

Question

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

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

在桌面上,它呈现为Unicode后备字符 - 带有数字的小方块.

因此,使用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)将使用他们的内置颜色表情符号和所有其他浏览器将使用提供的符号字体？

Answer 1

Modernizr 有一个用于表情符号支持的（非核心）功能检测。如果您使用 cssclasses 和 emoji 创建自己的Modernizr 版本，则可以使用.no-emoji添加到标签的类html来获得不同的font-family.

body {
    font-family: sans-serif;
}

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

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

根据评论更新

要了解是否可以检测支持的特定字符，让我们看一下 Modernizr 的表情符号支持功能检测源代码：

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元素，渲染考拉表情符号并检查特定像素的红色通道值，我假设该像素存在于该表情符号的每个再现中。

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

PS我认为在后备表情符号字体之前指定表情符号的默认字体应该足以解决这个问题，我假设这些表情符号不存在于默认字体中是否正确？

Answer 2

一种方法是用于没有本机支持media-queries的目标设备（例如台式电脑），并应用自定义font-family，例如（非常广泛地说，您将需要完善以下内容）

// target devices with 'larger than mobile' screen size...and apply the emoji 'polyfill'
@media only screen and (min-device-width: 768px){
   body{
      font-family:quiviraregular;
   }
}