web-dev-qa-db-fra.com

Comment utiliser une police emoji sur un site Web?

J'ai téléchargé "Noto Color Emoji" de Google font, mais je ne parviens pas à le faire fonctionner. Je n'ai aucun problème avec les polices comme "Noto Sans Regular". Mais avec la police "Noto Color Emoji", j'obtiens les erreurs suivantes dans Firefox (sous Windows 10):

downloadable font: no supported glyph shapes table(s) present (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)
downloadable font: rejected by sanitizer (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)

Cela ne fonctionne pas non plus avec Chrome, Internet Explorer et Edge sous Windows 10 ou Firefox sous Ubuntu Linux.

Ceci est mon code:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        @font-face {
            font-family: 'NotoColorEmoji';
            src: url('NotoColorEmoji.ttf') format('truetype');
        }
    </style>
</head>

<body>
    <span style="font-family: 'NotoColorEmoji'">Emojis: ????????????????????????????????????????????????</span>
</body>

Qu'est-ce que je fais mal? Les polices Emoji sont-elles utilisées différemment?

htmlcssfontswebfontsemoji
7
John

Les polices de couleur sont assez nouvelles avec plusieurs normes concurrentes qui évoluent encore et sont implémentées dans des bibliothèques de texte communes (Opentype 1.8 vient d'être publié avec une autre modification de couleur).

Il est peu probable qu'ils fonctionnent aujourd'hui, sauf dans les navigateurs de prévisualisation les plus récents. Même dans ce cas, le niveau de support varie et dépend du système sous-jacent, car les navigateurs utilisent les bibliothèques de texte système (avec différents niveaux de substitution).

Un logiciel plus ancien ne reconnaîtra tout simplement pas les extensions Opentype ajoutées pour rendre ces polices possibles.

Enfin, Noto Color Emoji est à peu près un prototype, il est probable que les premières versions ne soient pas tout à fait conformes à ce qui a été normalisé par la suite, et même si elles le sont, la manière dont les normes de police de couleur sont utilisées évoluera probablement en tant que les consommateurs de polices gagnent en maturité sur le sujet.

4
nim

Les polices de couleur arrivent, mais vous devrez soit:

  • Implémentez tous les formats de couleur dans une police (4 au total!) -> Je ne sais pas si quelqu'un l'a fait, mais la police serait énorme, et elle a l'air vraiment compliquée et non recommandée.
  • Créez une police pour chaque format et chargez-la de manière conditionnelle. -> Non recommandé car certains formats sont basés sur des images bitmap et que les vecteurs et les polices ne peuvent pas être énormes (+ 20Mo).
  • Attendez que le format OpenType SVG soit pris en charge sur toutes les plateformes.
  • Faites-le en javascript comme
    • Twemoji "Une bibliothèque simple qui fournit une prise en charge standard des emoji Unicode Sur toutes les plateformes."
    • EmojiOne "EmojiOne ™ est la norme Ouverte emoji."

La dernière solution semble la meilleure pour le moment pour une utilisation Web!

1
Joël