我想在我的网页🔍中使用这个特定的表情符号-🔍
在Android上，浏览器将Unicode字形识别为Emoji并显示。
在桌面上，它呈现为Unicode回退字符--一个带数字的小方块。
所以，使用Symbola，Quivira或任何其他具有正确符号的字体，我可以解决这个问题。
@font-face {
font-family: 'quiviraregular';
src: url('fonts/quivira.woff2') format('woff2');
}
body{
font-family:sans-serif,quiviraregular;
}但是，现在Android显示的是字体中的符号，而不是Emoji。
有没有办法设置font-family声明，以便Android（和iPhone）将使用其内置的颜色Emoji，而所有其他浏览器将使用提供的符号字体？
4条答案
按热度按时间h9vpoimq1#
Modernizr有一个（非核心）功能检测emoji支持。如果您使用cssclasses和emoji创建自己的Modernizr版本，则可以使用添加到
html标记的.no-emoji类来创建不同的font-family。我已经创建了一个**jsFiddle**，如果你有emoji支持，它会显示绿色背景，如果没有emoji支持，它会显示红色背景和Kenichi Kaneko's EmojiSymbols字体。不幸的是，我只能看到EmojiSymbols字体在Windows 7 + Firefox上工作，但这可能会给予你一个开始。
根据评论更新
要查看是否可以检测特定字符，请看Modernizr的特征检测source code for emoji support：
它的工作原理是创建一个
canvas元素，渲染🐨考拉表情符号，并检查特定像素的红色通道值，我假设这个表情符号的每个渲染中都存在。您可以扩展此函数以检查参数列表中的所有表情符号是否受支持，如果不受支持，则使用表情符号字体回退。我认为最好的解决方案是在同一画布上渲染每个表情符号，并检查每个表情符号的边界框内是否至少有一个像素着色。我不确定不支持的表情符号是如何呈现的，可能需要检测这个。
**P.S.**因为我假设在备用表情符号字体之前指定表情符号的默认字体应该足以解决这个问题，我假设这些表情符号不存在默认字体是正确的吗？
oaxa6hgo2#
一种方法是将
media-queries用于没有本机支持的目标设备（如台式PC），并应用自定义font-family，例如（非常广泛地说，你会想细化下面）ubof19bj3#
我接受了@ckuijjer的答案，并与之一起运行。我发现位置16，16在IE11中不可靠。位置14，16在FireFox中有问题。但到目前为止，位置12，16在我尝试过的任何地方都有效（IE11，Edge，FF 42+，Chrome; Windows7、Windows10、OSX10.11）。
然后，我只需在页面加载时调用
EmojiUtils.polyfillEmoji()。我给我的身体添加了
font-family: "EmojiOneColor", "EmojiOneColor-9", sans-serif;font.css:
font-versioned.css:
这样做的好处是，如果chrome本身就有彩色表情符号，它只会加载Unicode 9个字符。由于chrome的限制，加载的将是黑色和白色。在其他使用白色本地emoji的系统上，它会加载整个emoji字体。该版本上的
unicode-range仍然确保只有在页面上存在emoji时才会加载字体（第一次加载时可以使用Brief豆腐）。qyswt5oh4#
sans-serif通用家族的问题是，系统字体通常具有用于通常的单码点表情符号的白色字形。特别是，如果这些表情符号与旧的Wingdings符号有关。浏览器将选择这些字符，忽略后面的U+FE0F，并愉快地显示该字形。
有一个名为
emoji的新通用字体家族可以用来解决这个问题，并选择系统的彩色表情符号字体（如果安装了）。不幸的是，目前对这个新值的支持并不太好，因此使用通常安装的系统emoji字体作为前缀仍然是一个好主意。然后，它可以后跟自己的后备字体，如果没有找到系统表情符号字体，则使用该字体。
font-family声明看起来像这样：使用这种技术的站点是Emojipedia。