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

4 respostas »

  1. Gabi diz:
    19/09/2007 as 22:12

    Quem quiser saber mais sobre CSS tem um site excelente e todo em português: http://www.maujor.com

    [Responder]

  2. Economizando código com CSS: Margin, Border e Padding. - Richard Barros - Blog e Portfolio diz:
    28/09/2007 as 10:51

    [...] Veja também meu artigo sobre economizar código no css com a propriedade font. [...]

  3. Economizando código no CSS: Margin, Border e Padding - Richard Barros - Blog e Portfolio diz:
    20/02/2008 as 15:50

    [...] Veja também meu artigo sobre economizar código no css com a propriedade font. [...]

  4. k00dez diz:
    19/02/2010 as 16:20

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

    [Responder]

URL para Trackback

Deixe um comentário