I want to use this specific emoji in my web page 🔍
- 🔍
On Android, the browser recognises the Unicode glyph as an Emoji, and displays.
On the desktop it renders as a Unicode fallback character - a little square with numbers in.
So, using Symbola, Quivira, or any other font with the right symbols, I can fix that.
@font-face {
font-family: 'quiviraregular';
src: url('fonts/quivira.woff2') format('woff2');
}
body{
font-family:sans-serif,quiviraregular;
}
However, now Android displays the symbol from the font, not the Emoji.
Is there any way to set the font-family
declaration so that Android (and iPhone) will use their in-built colour Emoji and all other browsers will use the provided symbol font?
Modernizr has a (non core) feature detection for emoji support. If you create your own build of Modernizr with cssclasses and emoji you can use the .no-emoji
class that's added to the html
tag to have a different font-family
.
body {
font-family: sans-serif;
}
.no-emoji body {
font-family: sans-serif, emojisymbols;
}
I've created a jsFiddle that shows a green background if you have emoji support, and a red background and Kenichi Kaneko's EmojiSymbols font if haven't got emoji support. Unfortunately I could only see the EmojiSymbols font work on Windows 7 + Firefox, but this might give you a start.
Update based on comment
To see that it is possible to detect a specific character is supported lets take a look at Modernizr's feature detection 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;
});
});
it works by creating a canvas
element, rendering the