Richard Barros

Economizando código no CSS: Propriedade Font

Livros que recomendo

  • Não me Faça Pensar - Usabilidade na Web
  • Design para a Internet: Projetando a Experiência Perfeita
  • Construindo Sites com CSS e (X)HTML
  • Getting Things Done - A Arte de Fazer Acontecer
  • Construindo Sites com CSS e (X)HTML
  • Construindo Sites com CSS e (X)HTML

Estou lendo

Projetos Pessoais

  • Twitter

  • @richardbarros ( followers)

    Blog

    12/09/2007

    Economizando código no CSS: Propriedade Font

    Este post fala sobre

    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; }
    Bookmark e Compartilhe

    3 Comentarios »

    1. Gabi
      19/09/2007 10:12 pm

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

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

      […] 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 (Pingback)
      20/02/2008 3:50 pm

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

    Deixe um comentario