O que a barra direta significa na abreviação de fonte CSS?

186

Estou vendo a seguinte declaração CSS em uma folha de estilo:

font: 12px/18px ...

O que a 12px/18pxpeça significa exatamente?

css fonts

— Webnet
fonte

2

Foi incorreto fechar isso como muito localizado. A pergunta é simples, e também a resposta, mas é claramente algo que as pessoas perguntam com frequência e tem uma boa resposta.

— Jukka K. Korpela

206

12px é o tamanho da fonte, 18px é a altura da linha.

A sintaxe é baseada em notação tipográfica para especificar os respectivos tamanhos e é aplicável apenas à fontpropriedade abreviada. Em outras palavras, a declaração acima simplesmente se expande para o seguinte:

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

Como sempre, se você definir a altura da linha com um valor relativo (por exemplo, porcentagem ou ems), ela será calculada em relação ao tamanho da fonte.

W3C CSS2.1 fontreferência da propriedade
W3C CSS3 Fontes Módulo fontreferência da propriedade (a sintaxe transporta, de CSS2.1)

— BoltClock
fonte

66

É equivalente a:

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

— cutucar
fonte