¿Qué significa la barra diagonal en la abreviatura de la fuente CSS?

186

Veo la siguiente declaración CSS en una hoja de estilo:

font: 12px/18px ...

¿Qué 12px/18pxsignifica exactamente la parte?

css fonts

— Webnet
fuente

2

Fue incorrecto cerrar esto como demasiado localizado. La pregunta es simple, y también lo es la respuesta, pero es claramente algo que la gente pregunta con frecuencia y tiene una buena respuesta.

— Jukka K. Korpela

206

12pxes el tamaño de fuente, 18pxes la altura de la línea.

La sintaxis se basa en la notación tipográfica para especificar los tamaños respectivos y solo es aplicable a la fontpropiedad abreviada. En otras palabras, la declaración anterior simplemente se expande a lo siguiente:

font-size: 12px;
line-height: 18px;

Como siempre, si establece la altura de la línea en un valor relativo (por ejemplo, porcentaje o ems), se calcula en relación con el tamaño de la fuente.

W3C CSS 2.1 fontreferencia de propiedad
W3C CSS 3 Fuentes módulo de fontreferencia de la propiedad (la sintaxis lleva más de CSS2.1)

— BoltClock
fuente

66

Es equivalente a:

font-size: 12px;
line-height: 18px;

— dar un toque
fuente