Bert Boscriado em 17 jan 2001;
atualizado $Data: 2004/08/16 10:13:54 $ GMT
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.
(This page uses CSS style sheets)
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 |
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.