Esta é a tradução do tutorial "Web Style Sheets CSS tips & tricks - A chart comparing font styles" de autoria de Bert Bos publicado no site do W3C.

1. A versão oficial e original, em inglês, deste tutorial, encontra-se em: http://www.w3.org/Style/Examples/007/fonts.html e os seus direitos são conforme:

Copyright ©2002 W3C® (MIT, INRIA, Keio), Todos os direitos reservados. São aplicáveis as disposições do W3C relativas a responsabilidade, marcas, uso de documentos e licença de software

2. A única versão oficial deste documento é a versão em língua inglesa que se encontra no sítio do W3C.

3. O presente documento traduzido para a língua portuguesa do Brasil, pode conter erros de tradução.

Este documento foi traduzido em 23 de julho de 2005 por: Maurício Samy Silva e encontra-se hospedado no seu sítio "CSS para WebDesign" em http://www.maujor.com/
A traduçao foi feita somente para este documento, vale dizer, as páginas remetidas pelos links aqui indicados, estão em sua versão original em língua inglesa.

Folhas de estilo para a Web
CSS dicas e macetes

(This page uses CSS style sheets)

Famílias de fontes

Estilos de fontes

Famílias de fontes

Depois da cor, a fonte (letra) é provavelmente a mais fundamental propriedade de uma página. Neste artigo eu não quero mostrar nenhuma 'dica' especificamente, mas sim apresentar toda a variadade de estilização para fontes oferecida pelas CSS.

Uma vez que nem todas as fontes existentes estão instaladas nos computadores dos usuários (existem milhares de fontes e a maioria delas não é gratuita), CSS fornece um mecanismo para compensar esta lacuna. Você define uma lista de fontes para seu documento a serem usadas na ordem que você definiu (se a primeira da lista não estiver disponível no computador do usuário usar a segunda e assim por diante) e a última fonte da lista deverá ser uma fonte genérica dentre uma das cinco disponíveis: serif, sans-serif, monospace, cursive e fantasy.

A tabela a seguir mostra exemplos de vários tipos de fontes (talvez o seu navegador não dê suporte para todas elas) e assim você poderá visualizar como o seu navegador renderiza cada uma das cinco fontes genéricas:

'sans-serif': fontes normais sem serifas
Arial, sans-serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Helvetica, sans-serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Gill Sans, sans-serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Lucida, sans-serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Helvetica Narrow, sans-serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
sans-serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
'serif': fontes normais com serifas
Times, serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Times New Roman, serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Palatino, serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Bookman, serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
New Century Schoolbook, serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
serif A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
'monospace': fontes com largura fixa
Andale Mono, monospace A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Courier New, monospace A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Courier, monospace A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Lucidatypewriter, monospace A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Fixed, monospace A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
monospace A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
'cursive': fontes que simulam manuscrito
Comic Sans, Comic Sans MS, cursive A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Zapf Chancery, cursive A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Coronetscript, cursive A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Florence, cursive A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Parkavenue, cursive A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
cursive A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
'fantasy': fontes decorativas , para títulos, etc.
Impact, fantasy A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Arnoldboecklin, fantasy A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Oldtown, fantasy A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Blippo, fantasy A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
Brushstroke, fantasy A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso
fantasy A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso

Estilos de Fontes

A maioria das fontes admite variadas formas de estilização para uma mesma família, típicamente o negrito (bold) e o itálico (italic) e frequentemente a combinação deles, negrito itálico(bold-italic), não tão frequente a estilização em capitalização minúscula (small-caps) e em poucos casos as versões muito claro, muito negrito, letras condensadas e letras espaçadas (extra-light/extra-bold or stretched/condensed).

A tabela a seguir mostra diferentes estilizações. A menos que você tenha uma grande coleção de fontes instaladas no seu computador você verá a maioria das linhas renderizada de modo idêntico.

regra serifa sem-serifa
Estilos
font-style: normal A Ágil... A Ágil...
font-style: italic A Ágil... A Ágil...
font-style: oblique A Ágil... A Ágil...
Weights
font-weight: 100 A Ágil... A Ágil...
font-weight: 200 A Ágil... A Ágil...
font-weight: 300 A Ágil... A Ágil...
font-weight: normal A Ágil... A Ágil...
font-weight: 500 A Ágil... A Ágil...
font-weight: 600 A Ágil... A Ágil...
font-weight: bold A Ágil... A Ágil...
font-weight: 800 A Ágil... A Ágil...
font-weight: 900 A Ágil... A Ágil...
Variants
font-variant: normal A Ágil... A Ágil...
font-variant: small-caps A Ágil... A Ágil...
Stretch
font-stretch: ultra-condensed A Ágil... A Ágil...
font-stretch: extra-condensed A Ágil... A Ágil...
font-stretch: condensed A Ágil... A Ágil...
font-stretch: semi-condensed A Ágil... A Ágil...
font-stretch: normal A Ágil... A Ágil...
font-stretch: semi-expanded A Ágil... A Ágil...
font-stretch: expanded A Ágil... A Ágil...
font-stretch: extra-expanded A Ágil... A Ágil...
font-stretch: ultra-expanded A Ágil... A Ágil...

Em CSS3, existe mais uma estilização disponível: 'font-effect' que dá um aspecto de relevo nas fontes.

[CSS Feito] [CSS Válido] [HTML 4.01 Válido]

Bert Bos
criado em 17 jan 2001;
atualizado $Data: 2004/08/16 10:13:54 $ GMT