Unicode en CSS: escapes de content, unicode-range y fuentes

TL;DR — Respuesta directa

En las propiedades CSS content: "...", los caracteres Unicode se escapan con una barra invertida seguida de 1 a 6 dígitos hexadecimales que representan el punto de código. Si al carácter le sigue inmediatamente una letra hexadecimal (a-f) o un dígito, debe escribir un código hexadecimal completo de 6 dígitos o colocar un espacio delimitador tras el escape.

💡

Regla de producción: Use \2713 o \002713 para la marca de verificación ✓; recuerde que un espacio inmediatamente después de un escape hexadecimal CSS actúa como delimitador y lo consume el analizador.

Escapes Unicode CSS de símbolos comunes

Escapes CSS de barra invertida hexadecimal listos para usar en iconos de interfaz frecuentes.

Check Mark

Multiplication X

Right Arrow

Bullet

Black Star

Escapes Unicode en pseudo-elementos CSS y espacios delimitadores finales

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

Salida del programa

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

Errores comunes frente a patrones de producción

Aprenda qué patrones fallan en producción y cuáles son las alternativas modernas conformes con los estándares.

Gestionar letras hexadecimales posteriores en escapes CSS

Escapes seguidos inmediatamente de a-f o números.

EVITAR: ❌ Dígitos hexadecimales ambiguos sin delimitador

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

Por qué falla: El analizador CSS consume hasta 6 dígitos hexadecimales e interpreta erróneamente la letra «e» como parte del número del punto de código.

RECOMENDADO: ✅ Espacio delimitador final o relleno a 6 dígitos

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

Por qué es mejor: Termina la secuencia hexadecimal sin ambigüedad.

Matriz de casos límite e invariantes

Una matriz de pruebas diversa entre caracteres que compara el comportamiento de los caracteres en ASCII, marcas combinantes, emojis, banderas y fragmentos sustitutos.

Caso de prueba	Glifo de entrada	Unidades de código	Puntos de código	Grafemas	Categoría	Explicación técnica
Emojis del plano suplementario en CSS	🔥 (U+1F525)	`—`	`—`	`—`	Standard	Requiere 5 dígitos hexadecimales (\1F525). Válido en CSS sin pares sustitutos.

Procedencia de estándares y fuentes

Todos los invariantes técnicos, las API y los comportamientos de esta guía se verifican contra las especificaciones primarias oficiales.

W3C

CSS Syntax Module Level 3

Cláusula: §4.3.7 Consume an escaped code point

Leer la especificación →

W3C

CSS Fonts Module Level 4

Cláusula: §4.5 Character range: the unicode-range descriptor