Idiomas

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

Folhas de estilo para a Web
CSS dicas e macetes

Ver index para todas as dicas.

Nesta página:

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:

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

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
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.

Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2017 W3C®

criado em 17 jan 2001;
atualizado qui 09 nov 2017 04:40:59 UTC

Idiomas

Sobre traduções