Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva
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:
Fonte | Seu navegador | Imagem |
---|---|---|
'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 | |
Verdana, sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Trebuchet MS, 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 | |
Noto Sans, sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Avantgarde, TeX Gyre Adventor, URW Gothic L,
sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Optima, sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Arial 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, Times New Roman, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Didot, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Georgia, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Palatino, URW Palladio L, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Bookman, URW Bookman L, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
New Century Schoolbook, TeX Gyre Schola, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
American Typewriter, 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 | |
FreeMono, monospace
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
OCR A Std, monospace
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
DejaVu Sans Mono, 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 MS, Comic Sans, cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Apple Chancery, cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Bradley Hand, cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Brush Script MT, Brush Script Std, cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Snell Roundhand, cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
URW Chancery L, 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 | |
Luminari, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Chalkduster, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Jazz LET, 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 | |
Stencil Std, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Marker Felt, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
Trattatello, 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 |
---|---|---|
Styles | ||
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... |
O Módulo para fontes das especificações das CSS prevê mais propriedades para definição de fontes especiais (aquelas que admitem diversas variantes), em particular uma série de novos valores para a propriedade font-variant.
criado em 17 jan 2001;
atualizado qua 06 jan 2021 05:40:49 UTC