Zum Hauptinhalt springen
🎨 CSS3 / Web Fonts Standard: W3C CSS Syntax Level 3 / CSS Fonts Level 4 Time: 5 Min. Lesezeit Geprüft: September 2024

Unicode in CSS: Content-Escapes, unicode-range & Fonts

Sonderzeichen in CSS-Pseudoelemente mit Backslash-Hex-Escapes einfügen, @font-face-unicode-range-Subsets definieren und Font-Fallbacks handhaben.

TL;DR — Direktantwort

Direkte technische Antwort

In CSS-content:-Eigenschaften werden Unicode-Zeichen mit einem Backslash gefolgt von 1 bis 6 hexadezimalen Ziffern des Codepunkts maskiert. Folgt auf das Zeichen unmittelbar ein Hexbuchstabe (a–f) oder eine Ziffer, müssen Sie entweder einen vollständigen 6-stelligen Hexcode schreiben oder ein abschließendes Leerzeichen als Trennzeichen an die Escape-Sequenz setzen.

💡
Produktionsregel: Verwenden Sie \2713 oder \002713 für das Häkchen ✓; beachten Sie, dass ein Leerzeichen direkt nach einem CSS-Hex-Escape als Trennzeichen wirkt und vom Parser konsumiert wird.

Häufige CSS-Unicode-Symbol-Escapes

Fertig verwendbare CSS-Backslash-Hex-Escapes für gebräuchliche UI-Icons.

Check Mark
Multiplication X
Right Arrow
Bullet
Black Star

Unicode-Maskierung in CSS-Pseudoelementen und abschließende Leerzeichen-Trenner

CSS unicode-css.css 
/* 1. Basic CSS Unicode hex escapes */
.btn-check::before {
  content: "\2713 "; /* \2713 (✓) + space delimiter */
  color: #16a34a;
}

.btn-arrow::after {
  content: "\2192";  /* → (Right Arrow) */
  margin-left: 0.5rem;
}

/* 2. Using unicode-range in @font-face to optimize web font downloading */
@font-face {
  font-family: 'SymbolFont';
  src: url('/fonts/symbols.woff2') format('woff2');
  unicode-range: U+2190-21FF, U+2700-27BF; /* Arrows & Dingbats only */
}
Programmausgabe 
/* Rendered pseudo-elements display ✓ and → */

Häufige Fehler vs. Produktionsmuster

Erfahren Sie, welche Muster in der Produktion fehlschlagen und welche modernen standardkonformen Alternativen es gibt.

Nachfolgende Hexbuchstaben in CSS-Escapes handhaben

Escapes, denen unmittelbar a–f oder Ziffern folgen.
VERMEIDEN: ❌ Mehrdeutige Hexziffern ohne Trennzeichen 
/* Want checkmark (2713) followed by letter 'e' */
.item::before {
  content: "\2713e"; /* Parsed as 5-digit hex \2713e! */
}
Warum es fehlschlägt: Der CSS-Parser konsumiert bis zu 6 Hexziffern und interpretiert den Buchstaben „e" fälschlich als Teil der Codepunkt-Zahl.
EMPFOHLEN: ✅ Abschließendes Leerzeichen-Trennzeichen oder 6-stelliges Padding 
/* Option A: Use space delimiter (space is consumed) */
content: "\2713 e";
/* Option B: Pad to full 6 digits */
content: "\002713e";
Warum es besser ist: Beendet die Hexadezimalsequenz eindeutig.
Quelle: W3C CSS Syntax Module Level 3 §4.3.7

Edge-Cases- & Invarianten-Matrix

Eine vielfältige Testmatrix, die das Verhalten von Zeichen über ASCII, kombinierende Zeichen, Emojis, Flaggen und Surrogatfragmente hinweg vergleicht.

Testfall Eingabe-Glyph Codeeinheiten Codepunkte Grapheme Kategorie Technische Erklärung
Emojis aus der ergänzenden Ebene in CSS 🔥 (U+1F525) — — — Standard Erfordert 5 Hexziffern (\1F525). In CSS ohne Surrogatpaare gültig.

Standards & Quellenherkunft

Alle technischen Invarianten, APIs und Verhaltensweisen in diesem Leitfaden werden gegen offizielle primäre Spezifikationen verifiziert.

W3C

CSS Syntax Module Level 3

Klausel: §4.3.7 Consume an escaped code point

Spezifikation lesen →
W3C

CSS Fonts Module Level 4

Klausel: §4.5 Character range: the unicode-range descriptor

Spezifikation lesen →