Economizando código no CSS: Propriedade Font

Pouca gente sabe sobre a possibilidade de usar abreviação no CSS e que existe um padrão para isso. Isso pode facilitar muito o trabalho e trazer muitos ganhos com otimização de código.

Assumindo a grande importância da economia de código na elaboração do CSS decidi fazer uma série de posts sobre o assunto e começarei falando sobre a propriedade Font.

Mãos à obra.

O primeiro passo é definir um estilo qualquer de texto:

p { font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.3em;
font-family: "Trebuchet MS";
}

Foram 6 linhas e 132 caracteres. Vamos aprender a resolver isso usando apenas uma propriedade e uma linha. Para isso precisamos saber como funciona a abreviação da propriedade font e a ordem em que os atributos devem ser preenchidos.

p { font: font-style font-variant font-weight
font-size/line-height font-family; }

Veja na prática como ficaria nosso exemplo.

p { font: italic small-caps bold 1em/1.3em
"Trebuchet MS"; }

Conseguimos reduzir o código para 1 linha e 54 caracteres. Você ainda pode omitir o que não deseja alterar e fazer uma linha de código mais simples ainda.

Simplificando.

p { font: bold 0.9em/1em "Trebuchet MS"; }

Ou quem sabe definir apenas font-size e font-family

p { font: 1.5em Arial; }

Compartilhe: