Tamanho da fonte em CSS com barra

133

O que a barra significa aqui:

font: 100%/120%;

html css size

— Alex
fonte

font-sizenão aceita a barra. A propriedade correta é font.

— BoltClock

e esses? background: "rgba (0, 0, 0, 0) none repita a rolagem 0% 0% / caixa de preenchimento automático border-box"

— jerinho.com 18/11/2012

195

Na verdade, isso define duas propriedades e é equivalente a:

font-size: 100%;
line-height: 120%;

Para citar a documentação oficial :

A sintaxe dessa propriedade é baseada em uma notação abreviada de tipografia tradicional para definir várias propriedades relacionadas a fontes.

Como David M disse nos comentários, ele reflete a tradição tipográfica de especificar os tamanhos dos caracteres como " x pt em y pt" para indicar o tamanho do glifo na altura da linha.

Mas o exemplo na sua pergunta está realmente errado e seria ignorado pelo navegador: você só pode combinar essas duas propriedades na fontnotação abreviada e deve especificar pelo menos o tamanho da fonte e a família. Simplesmente escrever font: 100%/120%;não é suficiente; você pode adicionar um nome de família genérico para torná-lo válido, por exemplo:

font: 100%/120% serif;

— Konrad Rudolph
fonte

É para espelhar a sintaxe antiga de digitação, onde você teria a fonte definida como, por exemplo, "10pt em 12pt" ou "10pt / 12pt".

— 31909 David M

Na verdade, eu uso isso bastante. O designer com quem trabalho sempre se refere ao dimensionamento como, por exemplo, "14 acima de 22". Eu o coloquei por acidente um dia e fiquei surpreso / contente quando funcionou.

— Dylan Lukes

uma rapidinha: esse formato também não exige que a família de fontes seja especificada? Meus navegadores estão ignorando esta propriedade: fonte: 12px / 16px; mas aceitando isso: fonte: 12px / 16px sans-serif; Esse comportamento também está documentado aqui

— kumarharsh

@Harsh Sim, uma família (juntamente com um tamanho) é minimamente necessária para a fontpropriedade taquigráfica, como você pode ver na definição oficial .

— 21913 Konrad Rudolph

obrigado pelo esclarecimento. Talvez você possa atualizar a resposta (ou a pergunta), pois isso é um pouco enganador, pois um leitor casual pode assumir que apenas uma declaração SIZE / LINE_HEIGHT funcionaria.

— precisa saber é o seguinte

O Konrad conseguiu essa, mas existem muitas propriedades de abreviação de CSS como essa que você pode usar para reduzir suas folhas de estilo. Alguns deles parecem um pouco enigmáticos, se você não os conhece.

— Bill the Lizard
fonte

Porém, a maioria das atalhos aborda propriedades de estilo relacionadas (por exemplo border-*). David deu uma boa explicação nos comentários à minha resposta. Quanto a taquigrafia ser enigmática: certamente verdadeira, mas muito útil e fácil de aprender.

— 319 Konrad Rudolph