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; }

Quer mais code & design? Siga-me no Twitter @richardbarros

4 comentá em “Economizando código no CSS: Propriedade Font

  1. k00dez 19/02/2010 16:20

    Show de bola. Tem mais alguns artigos sobre economia de código?

    Responder

Faça um comentário

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>