Actividades
Reportagens Tecnológicas
Indice do site
Traduções
Software
Pesquisa
Perto de:
Estilo
CSS
Dicas e Truques
Bert Boscriado em 17 de Janeiro de 2001;
Última actualização $Data: 2009/02/03 14:39:10 $GMT
Este documento é uma tradução de português (Europeu) do documento Inglês oficial.: |
(This page uses CSS style sheets)
Depois da cor, a letra é provavelmente a mais básica propriedade da página. Nesta página não vou mostrar nenhum "truque" mas vou mostrar o alcanse da variação das letras que o CSS permite.
Porque nem todas as letras estão disponíveis em todos os computadores ( existem centenas de letras e a maioria não é grátis). Css dispponibiliza um sistema de fallbacks. Escolhe a letra que quer, depois outras letras que substituam se a primeira não estiver disponivel e deve terminar a lista com umaletra genérica das quais existem 5:serif, sans-serif, monospace, cursive e fantasy.
A tabela seguinte mostra exemplos de várias letras ( o teu navegador pode não reconhecer todas) e pode o que o seu navegador faz com cada uma das 5 letras genéricas.
| 'sans-serif': normal fonts without serifs | |
|---|---|
Arial, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Helvetica, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Gill Sans, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Lucida, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Helvetica Narrow, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'serif': normal fonts with serifs | |
Times, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Times New Roman, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Palatino, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Bookman, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
New Century Schoolbook, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'monospace': fixed-width fonts | |
Andale Mono, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Courier New, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Courier, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Lucidatypewriter, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Fixed, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'cursive': fonts that emulate handwriting | |
Comic Sans, Comic Sans MS, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Zapf Chancery, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Coronetscript, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Florence, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Parkavenue, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'fantasy': decorative fonts, for titles, etc. | |
Impact, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Arnoldboecklin, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Oldtown, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Blippo, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Brushstroke, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
A maioria das letras têm vários estilos dentro da mesma família, o negrito ou o itálico também têm um estilo negrito itálico, muitas vezes um caps pequeno e em alguns casos light-extra / negrito-extra ou versões esticadas e condensadas.
A tabela em baixo mostra um número de diferentes estilos. A não ser que tenha uma coleção muito grande de letras, muitas das colunas serão as mesmas.
| rule | serif | sans-serif | |||
|---|---|---|---|---|---|
| Styles | |||||
font-style: normal
| The Quick… | The Quick… | |||
font-style: italic
| The Quick… | The Quick… | |||
font-style: oblique
| The Quick… | The Quick… | |||
| Weights | |||||
font-weight: 100
| The Quick… | The Quick… | |||
font-weight: 200
| The Quick… | The Quick… | |||
font-weight: 300
| The Quick… | The Quick… | |||
font-weight: normal
| The Quick… | The Quick… | |||
font-weight: 500
| The Quick… | The Quick… | |||
font-weight: 600
| The Quick… | The Quick… | |||
font-weight: bold
| The Quick… | The Quick… | |||
font-weight: 800
| The Quick… | The Quick… | |||
font-weight: 900
| The Quick… | The Quick… | |||
| Variants | |||||
font-variant: normal
| The Quick… | The Quick… | |||
font-variant: small-caps
| The Quick… | The Quick… | |||
| Stretch | |||||
font-stretch: ultra-condensed
| The Quick… | The Quick… | |||
font-stretch: extra-condensed
| The Quick… | The Quick… | |||
font-stretch: condensed
| The Quick… | The Quick… | |||
font-stretch: semi-condensed
| The Quick… | The Quick… | |||
font-stretch: normal
| The Quick… | The Quick… | |||
font-stretch: semi-expanded
| The Quick… | The Quick… | |||
font-stretch: expanded
| The Quick… | The Quick… | |||
font-stretch: extra-expanded
| The Quick… | The Quick… | |||
font-stretch: ultra-expanded
| The Quick… | The Quick… | |||
Em CSS3, existem um outro estilo disponível: 'efeito-letra' faz a letra parecer gravada ou estampada.
Actividades
Reportagens Tecnológicas
Indice do site
Traduções
Software
Pesquisa
Perto de:
Estilo
CSS
Dicas e Truques
Bert Bos