`font-variant-emoji` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft font-variant-emoji legt den standardmäßigen Darstellungsstil für Emojis fest.

Traditionell wurde dies erreicht, indem an den Emoji-Codepunkt ein Variation Selector angehängt wurde: U+FE0E für Text oder U+FE0F für Emoji. Diese Eigenschaft wirkt sich nur auf Emojis aus, die in einer Unicode-Emoji-Darstellungssequenz aufgeführt sind.

Syntax

css

/* Keyword values */
font-variant-emoji: normal;
font-variant-emoji: text;
font-variant-emoji: emoji;
font-variant-emoji: unicode;

/* Global values */
font-variant-emoji: inherit;
font-variant-emoji: initial;
font-variant-emoji: revert;
font-variant-emoji: revert-layer;
font-variant-emoji: unset;

Werte

Für diese Eigenschaft wird einer der folgenden Schlüsselwortwerte angegeben:

normal: Ermöglicht es dem Browser, die Darstellung des Emojis zu wählen. Häufig richtet sie sich nach der Einstellung des Betriebssystems.
text: Stellt das Emoji so dar, als würde es den Unicode-Variation-Selector für Text (U+FE0E) verwenden.
emoji: Stellt das Emoji so dar, als würde es den Unicode-Variation-Selector für Emojis (U+FE0F) verwenden.
unicode: Stellt das Emoji gemäß den Eigenschaften für die Emoji-Darstellung dar. Ist der Variation Selector U+FE0E oder U+FE0F vorhanden, hat er Vorrang vor diesem Wert.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	all elements and text. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

font-variant-emoji = 
  normal   |
  text     |
  emoji    |
  unicode

Barrierefreiheit

Auch wenn die Verwendung von Emojis unterhaltsam erscheinen mag, sollten Sie ihre Auswirkungen auf die Barrierefreiheit berücksichtigen, insbesondere für Menschen mit visuellen oder kognitiven Beeinträchtigungen. Beachten Sie bei der Verwendung von Emojis folgende Aspekte:

Ausgabe durch Screenreader: Screenreader lesen den Alternativtext eines Emojis vor. Berücksichtigen Sie daher, an welcher Stelle im Inhalt ein Emoji steht. Wiederholte und übermäßige Verwendung von Emojis beeinträchtigt die Nutzung mit Screenreadern. Emojis sind Emoticons vorzuziehen, da Emoticons als Satzzeichen vorgelesen werden.
Kontrast zum Hintergrund: Berücksichtigen Sie bei Emojis ihre Farben und deren Wirkung vor der Hintergrundfarbe. Das ist besonders wichtig, wenn sich die Hintergrundfarbe ändern kann, etwa beim Wechsel zwischen hellem und dunklem Modus.
Verwendungszweck: Verwenden Sie Emojis nicht als Ersatz für Wörter, da Ihre Interpretation ihrer Bedeutung von der Ihrer Nutzer abweichen kann. Bedenken Sie außerdem, dass Emojis in verschiedenen Kulturen und Regionen unterschiedliche Bedeutungen haben können. Wir empfehlen, sich möglichst auf allgemein bekannte Emojis zu beschränken.

Beispiele

Die Darstellung eines Emojis ändern

Dieses Beispiel zeigt, wie Sie ein Emoji in der Darstellungsform text oder emoji wiedergeben können.

HTML

<p class="no-support">
  Your Browser does not support <code>font-variant-emoji</code>. This image
  shows how it is rendered with support.
</p>
<img
  class="no-support"
  src="./font-variant-emoji-example.jpg"
  alt="a telephone emoji show as text, black and white next to a telephone emoji shown as emoji full color and graphical representation" />

html

<section class="emojis">
  <div class="emoji">
    <h2>text presentation</h2>
    <div class="text-presentation">☎</div>
  </div>
  <div class="emoji">
    <h2>emoji presentation</h2>
    <div class="emoji-presentation">☎</div>
  </div>
</section>

CSS

@supports (font-variant-emoji: emoji) {
  .no-support {
    display: none;
  }
  .emojis {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-family:
      "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  }
  .emoji > div {
    font-size: 2rem;
  }
}

@supports not (font-variant-emoji: emoji) {
  .emojis {
    display: none;
  }
}

css

.text-presentation {
  font-variant-emoji: text;
}

.emoji-presentation {
  font-variant-emoji: emoji;
}

Ergebnis

Spezifikationen

Spezifikation
CSS Fonts Module Level 4 # font-variant-emoji-prop

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

font-variant-emoji CSS property

HTML

CSS

Ergebnis

Help improve MDN

`font-variant-emoji` CSS property