font-variant-emoji

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die font-variant-emoji CSS Eigenschaft legt den Standardpräsentationsstil für die Anzeige von Emojis fest.

Traditionell wurde dies durch Anhängen eines Variation Selector, U+FE0E für Text und U+FE0F für Emoji, an den Emoji-Codepunkt durchgeführt. Nur Emojis, die zu einer Unicode-Emoji-Präsentationssequenz beitragen, werden von dieser Eigenschaft beeinflusst.

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;

Die font-variant-emoji-Eigenschaft wird mit einem einzelnen Schlüsselwortwert aus der unten stehenden Liste angegeben.

Werte

normal: Ermöglicht es einem Browser, auszuwählen, wie das Emoji angezeigt werden soll. Dies folgt oft der Einstellung des Betriebssystems.
text: Stellt das Emoji so dar, als ob es den Unicode-Textvariationsselektor (U+FE0E) verwenden würde.
emoji: Stellt das Emoji so dar, als ob es den Unicode-Emoji-Variationsselektor (U+FE0F) verwenden würde.
unicode: Stellt das Emoji gemäß den Emoji-Präsentationseigenschaften dar. Wenn der U+FE0E oder U+FE0F Variationsselektor vorhanden ist, wird dieser den Wert überschreiben.

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

Obwohl die Nutzung von Emojis unterhaltsam erscheinen mag, sollten Sie deren Einfluss auf die Barrierefreiheit berücksichtigen, insbesondere für Benutzer mit visuellen und kognitiven Einschränkungen. Beachten Sie die folgenden Faktoren bei der Verwendung von Emojis:

Anzeige auf Screenreadern: Screenreader lesen den Alt-Text eines Emojis vor. Berücksichtigen Sie dies, wenn Sie die Position eines Emojis im Inhalt wählen. Wiederholte und übermäßige Verwendung von Emojis wirkt sich nachteilig auf Benutzer von Screenreadern aus. Es ist besser, Emojis statt Emoticons zu verwenden; Emoticons werden als Satzzeichen vorgelesen.
Kontrast mit dem Hintergrund: Bei der Verwendung von Emojis sollten Sie deren Farben und deren Wirkung mit der Hintergrundfarbe berücksichtigen, insbesondere wenn Sie Hintergrundfarben haben, die sich ändern können, wie z. B. Licht-/Dunkelmodus.
Absicht der Verwendung: Verwenden Sie Emojis nicht als Ersatz für Wörter, da Ihr Verständnis der Bedeutung des Emojis von dem der Benutzer abweichen kann. Bedenken Sie auch, dass Emojis in verschiedenen Kulturen und Geografien unterschiedliche Bedeutungen haben könnten. Unsere Empfehlung ist, die Verwendung auf allgemein bekannte Emojis zu beschränken.

Beispiele

Ändern der Art und Weise, wie ein Emoji angezeigt wird

Dieses Beispiel zeigt, wie Sie ein Emoji in seiner text- oder emoji-Präsentation rendern 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;
  }
  .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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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