CSS reference to phone's Emoji font?

2020-05-23 09:38发布

问题:

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?

回答1:

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