Unicode en CSS : escapes et polices

TL;DR — Réponse directe

Dans les propriétés CSS content: "...", les caractères Unicode sont échappés avec un antislash suivi de 1 à 6 chiffres hexadécimaux représentant le point de code. Si le caractère est immédiatement suivi d'une lettre hexadécimale (a-f) ou d'un chiffre, vous devez soit écrire un code hexadécimal complet à 6 chiffres, soit placer une espace délimiteur après l'escape.

💡

Règle de production : Utilisez \2713 ou \002713 pour la coche ✓ ; rappelez-vous qu'une espace immédiatement après un escape hexadécimal CSS agit comme délimiteur et est consommée par l'analyseur.

Escapes Unicode CSS de symboles courants

Escapes CSS antislash-hexadécimaux prêts à l'emploi pour les icônes d'interface fréquentes.

Check Mark

Multiplication X

Right Arrow

Bullet

Black Star

Échappement Unicode dans les pseudo-éléments CSS et espaces délimiteurs

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

Sortie du programme

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

Erreurs courantes vs modèles de production

Découvrez quels modèles échouent en production et leurs alternatives modernes conformes aux standards.

Gérer les lettres hexadécimales suivant un escape CSS

Escapes immédiatement suivis de a-f ou de chiffres.

À ÉVITER : ❌ Chiffres hexadécimaux ambigus sans délimiteur

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

Pourquoi cela échoue : L'analyseur CSS consomme jusqu'à 6 chiffres hexadécimaux et interprète la lettre « e » à tort comme faisant partie du numéro du point de code.

RECOMMANDÉ : ✅ Espace délimiteur ou remplissage à 6 chiffres

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

Pourquoi c'est mieux : Termine la séquence hexadécimale sans ambiguïté.

Matrice des cas limites et invariants

Une matrice de tests diversifiée comparant le comportement des caractères entre ASCII, signes combinants, emojis, drapeaux et fragments de substitution.

Cas de test	Glyphe d'entrée	Unités de code	Points de code	Graphèmes	Catégorie	Explication technique
Emojis du plan supplémentaire en CSS	🔥 (U+1F525)	`—`	`—`	`—`	Standard	Nécessite 5 chiffres hexadécimaux (\1F525). Valide en CSS sans paires de substitution.

Normes et provenance des sources

Tous les invariants techniques, API et comportements de ce guide sont vérifiés par rapport aux spécifications primaires officielles.

W3C

CSS Syntax Module Level 3

Clause : §4.3.7 Consume an escaped code point

Lire la spécification →

W3C

CSS Fonts Module Level 4

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