Você já viu como alterar a cor de fundo e
a cor do texto na página.

Mas você pode fazer muito mais
com o texto em CSS.

Para começar, vamos alterar a fonte.

O que é uma fonte? Você provavelmente já
sabe o que é, mas você pode

não saber com essa palavra.

Fonte é o estilo das letras que formam
as palavras.

Se as letras têm flores sobre elas,
ou qual a espessura dela,

ou se elas parecem que são escritas com
uma caneta.

Será mais fácil se eu mudar o tipo de
letra nesta página.

Vou usar <i>< p ></i> como regra CSS que
seleciona todos os parágrafos,

e adicionar um propriedade
<i>font-family</i> (família de fontes) aqui.

<i>font-family: sans-serif;</i>

Viu como as letras mudaram
quando fiz isso?

Elas parecem mais simples agora.

Agora vou mudar a <i>font-family</i> de volta
especificando dessa vez a <i>serif</i>.

Percebeu que as letras ficaram um pouco
mais complexas?

Uma fonte <i>serif</i> são aquelas fontes que
parecem com uns "pezinhos" nas letras.

Quando dizemos ao navegador para usar uma
<i>font-family serif</i>, ele usará o padrão

<i>serif</i> para o computador. Que normalmente
é a fonte "Times New Roman".

Não sou um grande fã desse tipo de letra,
no entanto,

vou mudá-la de volta agora
para <i>sans-serif</i>.

O 'sans' vem do latim e significa "sem".

Assim, uma fonte <i>sans-serif</i> é aquela que
não tem aqueles "pezinhos" nas letras.

É por isso que são mais simples.

Quando dizemos ao navegador para usar uma
<i>font-family sans-serif</i>, ele usa

o padrão <i>sans-serif</i> para esse computador,
que normalmente é 'Arial' ou 'Helvetica'.

Mas aqui está um ponto importante:
Ele vai escolher a fonte padrão

do computador, e não a do autor da página.

Assim, podemos muito bem estar vendo duas
fontes <i>sans-serif</i> diferentes agora,

se o seu sistema tem um padrão
diferente do meu.

Às vezes, tudo bem, mas tem vez que eu
quero que o visitante da página veja

exatamente as mesmas fontes
como eu vejo.

Nesse caso, posso especificar precisamente
o nome da fonte. Por exemplo, 'Helvetica'.

Isto vai funcionar, desde que você e eu
tenhamos Helvetica em nossos computadores.

Mas nem todos os computadores têm as
mesmas fontes, nesse caso o computador irá

ignorar essa propriedade .

Felizmente o CSS nos permite especificar
uma <i>font-family</i> de reserva no caso de uma

fonte específica não existir em
um computador.

Colocamos uma vírgula depois de Helvetica
e em seguida colocamos <i>sans-serif</i>.

Agora, o computador procurará Helvetica,
e se não encontrá-la, ele vai usar a sua

fonte padrão <i>sans-serif</i>.

Geralmente, quando você especificar uma
fonte específica como Helvetica, você deve

sempre especificar um nome de reserva 
da família também.

Além da <i>serif</i> e <i>sans-serif</i> há um par de
outros nomes de <i>font-family</i> genérica

que podemos usar.

Se quiséssemos nossas letras manuscritas,
podemos especificar <i>font-family: cursive</i>.

Se quiséssemos as letras mais chiques,
podemos tentar a <i>font-family: fantasy</i>.

Ou se queremos que pareçam que
foram escritas numa máquina de escrever?

Poderíamos especificar a
<i>font-family: monospace</i>.

A fonte 'monospace' é de largura fixa,
o que significa que todas as letras ocupam

a mesma largura exata.

De fato, você já viu um monte de fontes
'monospace' aqui na Khan Academy,

porque sempre usamos a fonte 'monospace'
para editores de código.

Isso é porque queremos que todo o nosso
código esteja alinhado,

independente das palavras.

Agora que você sabe como alterar o tipo
de letra, use seu poder com sabedoria.

Se quer uma boa aparência para sua página,
use só algumas famílias diferentes,

e chegue a um par de fontes que
ficam bem juntas.

Mas se não quiser uma boa aparência,
então ela vai ficar feia igual uma ostra.

Vá em frente e mãos à obra.

Traduzido por [Fernando dos Reis]
Revisado por [Gabriel Mello Fernandes]