WEBVTT
00:00:00.511 --> 00:00:05.221
Você já viu como alterar a cor de fundo e
a cor do texto na página.
00:00:05.303 --> 00:00:08.682
Mas você pode fazer muito mais
com o texto em CSS.
00:00:09.509 --> 00:00:11.632
Para começar, vamos alterar a fonte.
00:00:12.577 --> 00:00:15.925
O que é uma fonte? Você provavelmente já
sabe o que é, mas você pode
00:00:15.925 --> 00:00:17.214
não saber com essa palavra.
00:00:17.244 --> 00:00:19.657
Fonte é o estilo das letras que formam
as palavras.
00:00:19.802 --> 00:00:22.996
Se as letras têm flores sobre elas,
ou qual a espessura dela,
00:00:23.176 --> 00:00:25.563
ou se elas parecem que são escritas com
uma caneta.
00:00:25.884 --> 00:00:30.266
Será mais fácil se eu mudar o tipo de
letra nesta página.
00:00:30.663 --> 00:00:35.441
Vou usar < p > como regra CSS que
seleciona todos os parágrafos,
00:00:35.729 --> 00:00:38.429
e adicionar um propriedade
font-family (família de fontes) aqui.
00:00:38.789 --> 00:00:41.129
font-family: sans-serif;
00:00:41.819 --> 00:00:43.829
Viu como as letras mudaram
quando fiz isso?
00:00:44.115 --> 00:00:45.805
Elas parecem mais simples agora.
00:00:47.293 --> 00:00:52.183
Agora vou mudar a font-family de volta
especificando dessa vez a serif.
00:00:52.283 --> 00:00:55.902
Percebeu que as letras ficaram um pouco
mais complexas?
00:00:55.902 --> 00:00:59.859
Uma fonte serif são aquelas fontes que
parecem com uns "pezinhos" nas letras.
00:00:59.979 --> 00:01:04.269
Quando dizemos ao navegador para usar uma
font-family serif, ele usará o padrão
00:01:04.269 --> 00:01:07.217
serif para o computador. Que normalmente
é a fonte "Times New Roman".
00:01:08.587 --> 00:01:11.075
Não sou um grande fã desse tipo de letra,
no entanto,
00:01:11.075 --> 00:01:13.114
vou mudá-la de volta agora
para sans-serif.
00:01:14.246 --> 00:01:17.806
O 'sans' vem do latim e significa "sem".
00:01:17.996 --> 00:01:21.810
Assim, uma fonte sans-serif é aquela que
não tem aqueles "pezinhos" nas letras.
00:01:22.101 --> 00:01:23.722
É por isso que são mais simples.
00:01:24.177 --> 00:01:27.936
Quando dizemos ao navegador para usar uma
font-family sans-serif, ele usa
00:01:27.936 --> 00:01:33.136
o padrão sans-serif para esse computador,
que normalmente é 'Arial' ou 'Helvetica'.
00:01:33.136 --> 00:01:37.710
Mas aqui está um ponto importante:
Ele vai escolher a fonte padrão
00:01:37.710 --> 00:01:41.216
do computador, e não a do autor da página.
00:01:41.553 --> 00:01:45.257
Assim, podemos muito bem estar vendo duas
fontes sans-serif diferentes agora,
00:01:45.317 --> 00:01:47.595
se o seu sistema tem um padrão
diferente do meu.
00:01:47.595 --> 00:01:54.330
Às vezes, tudo bem, mas tem vez que eu
quero que o visitante da página veja
00:01:54.330 --> 00:01:56.263
exatamente as mesmas fontes
como eu vejo.
00:01:56.701 --> 00:02:01.981
Nesse caso, posso especificar precisamente
o nome da fonte. Por exemplo, 'Helvetica'.
00:02:03.150 --> 00:02:07.938
Isto vai funcionar, desde que você e eu
tenhamos Helvetica em nossos computadores.
00:02:08.436 --> 00:02:12.641
Mas nem todos os computadores têm as
mesmas fontes, nesse caso o computador irá
00:02:12.708 --> 00:02:14.039
ignorar essa propriedade .
00:02:14.746 --> 00:02:20.029
Felizmente o CSS nos permite especificar
uma font-family de reserva no caso de uma
00:02:20.058 --> 00:02:22.303
fonte específica não existir em
um computador.
00:02:22.979 --> 00:02:28.001
Colocamos uma vírgula depois de Helvetica
e em seguida colocamos sans-serif.
00:02:28.443 --> 00:02:32.737
Agora, o computador procurará Helvetica,
e se não encontrá-la, ele vai usar a sua
00:02:32.737 --> 00:02:34.438
fonte padrão sans-serif.
00:02:35.070 --> 00:02:39.300
Geralmente, quando você especificar uma
fonte específica como Helvetica, você deve
00:02:39.324 --> 00:02:42.745
sempre especificar um nome de reserva
da família também.
00:02:44.447 --> 00:02:48.349
Além da serif e sans-serif há um par de
outros nomes de font-family genérica
00:02:48.349 --> 00:02:49.497
que podemos usar.
00:02:50.100 --> 00:02:56.604
Se quiséssemos nossas letras manuscritas,
podemos especificar font-family: cursive.
00:02:58.274 --> 00:03:03.874
Se quiséssemos as letras mais chiques,
podemos tentar a font-family: fantasy.
00:03:04.944 --> 00:03:08.305
Ou se queremos que pareçam que
foram escritas numa máquina de escrever?
00:03:08.305 --> 00:03:11.124
Poderíamos especificar a
font-family: monospace.
00:03:11.204 --> 00:03:15.184
A fonte 'monospace' é de largura fixa,
o que significa que todas as letras ocupam
00:03:15.196 --> 00:03:16.306
a mesma largura exata.
00:03:16.477 --> 00:03:20.051
De fato, você já viu um monte de fontes
'monospace' aqui na Khan Academy,
00:03:20.258 --> 00:03:23.328
porque sempre usamos a fonte 'monospace'
para editores de código.
00:03:23.996 --> 00:03:27.077
Isso é porque queremos que todo o nosso
código esteja alinhado,
00:03:27.216 --> 00:03:28.491
independente das palavras.
00:03:29.480 --> 00:03:33.310
Agora que você sabe como alterar o tipo
de letra, use seu poder com sabedoria.
00:03:33.450 --> 00:03:37.790
Se quer uma boa aparência para sua página,
use só algumas famílias diferentes,
00:03:37.998 --> 00:03:40.338
e chegue a um par de fontes que
ficam bem juntas.
00:03:40.958 --> 00:03:44.908
Mas se não quiser uma boa aparência,
então ela vai ficar feia igual uma ostra.
00:03:45.688 --> 00:03:47.308
Vá em frente e mãos à obra.
00:03:47.308 --> 00:03:49.000
Traduzido por [Fernando dos Reis]
Revisado por [Gabriel Mello Fernandes]