-
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 < p > como regra CSS que
seleciona todos os parágrafos,
-
e adicionar um propriedade
font-family (família de fontes) aqui.
-
font-family: sans-serif;
-
Viu como as letras mudaram
quando fiz isso?
-
Elas parecem mais simples agora.
-
Agora vou mudar a font-family de volta
especificando dessa vez a serif.
-
Percebeu que as letras ficaram um pouco
mais complexas?
-
Uma fonte serif são aquelas fontes que
parecem com uns "pezinhos" nas letras.
-
Quando dizemos ao navegador para usar uma
font-family serif, ele usará o padrão
-
serif 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 sans-serif.
-
O 'sans' vem do latim e significa "sem".
-
Assim, uma fonte sans-serif é aquela que
não tem aqueles "pezinhos" nas letras.
-
É por isso que são mais simples.
-
Quando dizemos ao navegador para usar uma
font-family sans-serif, ele usa
-
o padrão sans-serif 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 sans-serif 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 font-family 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 sans-serif.
-
Agora, o computador procurará Helvetica,
e se não encontrá-la, ele vai usar a sua
-
fonte padrão sans-serif.
-
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 serif e sans-serif há um par de
outros nomes de font-family genérica
-
que podemos usar.
-
Se quiséssemos nossas letras manuscritas,
podemos especificar font-family: cursive.
-
Se quiséssemos as letras mais chiques,
podemos tentar a font-family: fantasy.
-
Ou se queremos que pareçam que
foram escritas numa máquina de escrever?
-
Poderíamos especificar a
font-family: monospace.
-
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]
