Unicode in CSS: escape di content, unicode-range e font

TL;DR — Risposta diretta

Nelle proprietà CSS content: "..." i caratteri Unicode si scrivono con una barra inversa seguita da 1 a 6 cifre esadecimali che rappresentano il punto di codice. Se al carattere segue immediatamente una lettera esadecimale (a-f) o una cifra, occorre scrivere un codice esadecimale completo a 6 cifre oppure inserire uno spazio delimitatore dopo la sequenza di escape.

💡

Regola di produzione: Usate \2713 o \002713 per il segno di spunta ✓; ricordate che uno spazio subito dopo un escape esadecimale CSS funge da delimitatore e viene consumato dal parser.

Escape Unicode CSS dei simboli comuni

Escape CSS barra inversa-esadecimale pronti all'uso per le icone di interfaccia più frequenti.

Check Mark

Multiplication X

Right Arrow

Bullet

Black Star

Escape Unicode nei pseudo-elementi CSS e spazi delimitatori finali

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 */
}

Output del programma

/* Rendered pseudo-elements display ✓ and → */

Errori comuni vs modelli di produzione

Scopri quali modelli falliscono in produzione e le alternative moderne conformi agli standard.

Gestire le lettere esadecimali successive negli escape CSS

Escape immediatamente seguiti da a-f o numeri.

DA EVITARE: ❌ Cifre esadecimali ambigue senza delimitatore

/* Want checkmark (2713) followed by letter 'e' */
.item::before {
  content: "\2713e"; /* Parsed as 5-digit hex \2713e! */
}

Perché fallisce: Il parser CSS consuma fino a 6 cifre esadecimali e interpreta erroneamente la lettera «e» come parte del numero del punto di codice.

CONSIGLIATO: ✅ Spazio delimitatore finale o riempimento a 6 cifre

/* Option A: Use space delimiter (space is consumed) */
content: "\2713 e";
/* Option B: Pad to full 6 digits */
content: "\002713e";

Perché è migliore: Termina la sequenza esadecimale senza ambiguità.

Matrice dei casi limite e invarianti

Una matrice di test diversificata che confronta il comportamento dei caratteri tra ASCII, segni combinanti, emoji, bandiere e frammenti surrogati.

Caso di test	Glifo di input	Unità di codice	Punti di codice	Grafemi	Categoria	Spiegazione tecnica
Emoji del piano supplementare in CSS	🔥 (U+1F525)	`—`	`—`	`—`	Standard	Richiede 5 cifre esadecimali (\1F525). Valido in CSS senza coppie surrogate.

Standard e provenienza delle fonti

Tutti gli invarianti tecnici, le API e i comportamenti di questa guida sono verificati rispetto alle specifiche primarie ufficiali.

W3C

CSS Syntax Module Level 3

Clausola: §4.3.7 Consume an escaped code point

Leggi la specifica →

W3C

CSS Fonts Module Level 4

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