it-swarm.com.de

Wie verwende ich eine Emoji-Schrift auf einer Website?

Ich habe Googles "Noto Color Emoji" Schriftart heruntergeladen, kann sie jedoch nicht zum Laufen bringen. Ich habe keine Probleme mit Schriftarten wie "Noto Sans Regular". Aber mit der Schriftart "Noto Color Emoji" erhalte ich in Firefox (unter Windows 10) die folgenden Fehler:

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)

Es funktioniert auch nicht mit Chrome, Internet Explorer und Edge unter Windows 10 oder Firefox unter Ubuntu Linux.

Das ist mein 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>

Was mache ich falsch? Werden Emoji-Schriften anders verwendet?

7
John

Farbschriften sind recht neu mit mehreren konkurrierenden Standards, die sich noch weiterentwickeln und in gängigen Textbibliotheken implementiert werden (Opentype 1.8 wurde gerade mit einer anderen Farbveränderung veröffentlicht).

Sie funktionieren heute kaum noch, außer in den neuesten Vorschaubrowsern, und selbst dann ist die Unterstützung wahrscheinlich unterschiedlich und hängt vom zugrunde liegenden System ab, da Browser die Systemtextbibliotheken (mit verschiedenen Überschreibungsstufen) verwenden.

Ältere Software erkennt nur die Opentype-Erweiterungen, die hinzugefügt wurden, um diese Schriftarten zu ermöglichen.

Schließlich ist Noto Color Emoji so ziemlich ein Prototyp, es ist wahrscheinlich, dass frühe Versionen nicht ganz dem entsprechen, was später standardisiert wurde, und selbst wenn dies der Fall ist, wird sich die Verwendung der Farbschriftenstandards wahrscheinlich als Schrifthersteller und weiterentwickeln Font-Konsumenten werden zu diesem Thema reifer.

4
nim

Farbschriften kommen, aber Sie müssen entweder:

  • Implementiere alle Farbformate in einer Schriftart (insgesamt 4!) -> Ich weiß nicht, ob jemand es getan hat, aber die Schriftart wäre riesig und sieht sehr kompliziert aus und wird nicht empfohlen.
  • Erstellen Sie für jedes Format eine Schriftart und laden Sie sie unter bestimmten Bedingungen. -> Nicht zu empfehlen, da einige Formate auf Bitmaps basieren und keine Vektoren und Schriftarten sehr groß sein können (+ 20Mo).
  • Warten Sie auf allen Plattformen auf die Unterstützung des OpenType SVG-Formats.
  • Tun Sie es in Javascript wie
    • Twemoji "Eine einfache Bibliothek, die standardmäßige Unicode-Emoji - Unterstützung auf allen Plattformen bietet."
    • EmojiOne "EmojiOne ™ ist der offene Emoji-Standard ."

Die neueste Lösung sieht im Moment für die Verwendung im Internet am besten aus!

1
Joël