1
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.
2
00:00:05,303 --> 00:00:08,682
Mas você pode fazer muito mais
com o texto em CSS.
3
00:00:09,509 --> 00:00:11,632
Para começar, vamos alterar a fonte.
4
00:00:12,577 --> 00:00:15,925
O que é uma fonte? Você provavelmente já
sabe o que é, mas você pode
5
00:00:15,925 --> 00:00:17,214
não saber com essa palavra.
6
00:00:17,244 --> 00:00:19,657
Fonte é o estilo das letras que formam
as palavras.
7
00:00:19,802 --> 00:00:22,996
Se as letras têm flores sobre elas,
ou qual a espessura dela,
8
00:00:23,176 --> 00:00:25,563
ou se elas parecem que são escritas com
uma caneta.
9
00:00:25,884 --> 00:00:30,266
Será mais fácil se eu mudar o tipo de
letra nesta página.
10
00:00:30,663 --> 00:00:35,441
Vou usar < p > como regra CSS que
seleciona todos os parágrafos,
11
00:00:35,729 --> 00:00:38,429
e adicionar um propriedade
font-family (família de fontes) aqui.
12
00:00:38,789 --> 00:00:41,129
font-family: sans-serif;
13
00:00:41,819 --> 00:00:43,829
Viu como as letras mudaram
quando fiz isso?
14
00:00:44,115 --> 00:00:45,805
Elas parecem mais simples agora.
15
00:00:47,293 --> 00:00:52,183
Agora vou mudar a font-family de volta
especificando dessa vez a serif.
16
00:00:52,283 --> 00:00:55,902
Percebeu que as letras ficaram um pouco
mais complexas?
17
00:00:55,902 --> 00:00:59,859
Uma fonte serif são aquelas fontes que
parecem com uns "pezinhos" nas letras.
18
00:00:59,979 --> 00:01:04,269
Quando dizemos ao navegador para usar uma
font-family serif, ele usará o padrão
19
00:01:04,269 --> 00:01:07,217
serif para o computador. Que normalmente
é a fonte "Times New Roman".
20
00:01:08,587 --> 00:01:11,075
Não sou um grande fã desse tipo de letra,
no entanto,
21
00:01:11,075 --> 00:01:13,114
vou mudá-la de volta agora
para sans-serif.
22
00:01:14,246 --> 00:01:17,806
O 'sans' vem do latim e significa "sem".
23
00:01:17,996 --> 00:01:21,810
Assim, uma fonte sans-serif é aquela que
não tem aqueles "pezinhos" nas letras.
24
00:01:22,101 --> 00:01:23,722
É por isso que são mais simples.
25
00:01:24,177 --> 00:01:27,936
Quando dizemos ao navegador para usar uma
font-family sans-serif, ele usa
26
00:01:27,936 --> 00:01:33,136
o padrão sans-serif para esse computador,
que normalmente é 'Arial' ou 'Helvetica'.
27
00:01:33,136 --> 00:01:37,710
Mas aqui está um ponto importante:
Ele vai escolher a fonte padrão
28
00:01:37,710 --> 00:01:41,216
do computador, e não a do autor da página.
29
00:01:41,553 --> 00:01:45,257
Assim, podemos muito bem estar vendo duas
fontes sans-serif diferentes agora,
30
00:01:45,317 --> 00:01:47,595
se o seu sistema tem um padrão
diferente do meu.
31
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
32
00:01:54,330 --> 00:01:56,263
exatamente as mesmas fontes
como eu vejo.
33
00:01:56,701 --> 00:02:01,981
Nesse caso, posso especificar precisamente
o nome da fonte. Por exemplo, 'Helvetica'.
34
00:02:03,150 --> 00:02:07,938
Isto vai funcionar, desde que você e eu
tenhamos Helvetica em nossos computadores.
35
00:02:08,436 --> 00:02:12,641
Mas nem todos os computadores têm as
mesmas fontes, nesse caso o computador irá
36
00:02:12,708 --> 00:02:14,039
ignorar essa propriedade .
37
00:02:14,746 --> 00:02:20,029
Felizmente o CSS nos permite especificar
uma font-family de reserva no caso de uma
38
00:02:20,058 --> 00:02:22,303
fonte específica não existir em
um computador.
39
00:02:22,979 --> 00:02:28,001
Colocamos uma vírgula depois de Helvetica
e em seguida colocamos sans-serif.
40
00:02:28,443 --> 00:02:32,737
Agora, o computador procurará Helvetica,
e se não encontrá-la, ele vai usar a sua
41
00:02:32,737 --> 00:02:34,438
fonte padrão sans-serif.
42
00:02:35,070 --> 00:02:39,300
Geralmente, quando você especificar uma
fonte específica como Helvetica, você deve
43
00:02:39,324 --> 00:02:42,745
sempre especificar um nome de reserva
da família também.
44
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
45
00:02:48,349 --> 00:02:49,497
que podemos usar.
46
00:02:50,100 --> 00:02:56,604
Se quiséssemos nossas letras manuscritas,
podemos especificar font-family: cursive.
47
00:02:58,274 --> 00:03:03,874
Se quiséssemos as letras mais chiques,
podemos tentar a font-family: fantasy.
48
00:03:04,944 --> 00:03:08,305
Ou se queremos que pareçam que
foram escritas numa máquina de escrever?
49
00:03:08,305 --> 00:03:11,124
Poderíamos especificar a
font-family: monospace.
50
00:03:11,204 --> 00:03:15,184
A fonte 'monospace' é de largura fixa,
o que significa que todas as letras ocupam
51
00:03:15,196 --> 00:03:16,306
a mesma largura exata.
52
00:03:16,477 --> 00:03:20,051
De fato, você já viu um monte de fontes
'monospace' aqui na Khan Academy,
53
00:03:20,258 --> 00:03:23,328
porque sempre usamos a fonte 'monospace'
para editores de código.
54
00:03:23,996 --> 00:03:27,077
Isso é porque queremos que todo o nosso
código esteja alinhado,
55
00:03:27,216 --> 00:03:28,491
independente das palavras.
56
00:03:29,480 --> 00:03:33,310
Agora que você sabe como alterar o tipo
de letra, use seu poder com sabedoria.
57
00:03:33,450 --> 00:03:37,790
Se quer uma boa aparência para sua página,
use só algumas famílias diferentes,
58
00:03:37,998 --> 00:03:40,338
e chegue a um par de fontes que
ficam bem juntas.
59
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.
60
00:03:45,688 --> 00:03:47,308
Vá em frente e mãos à obra.
61
00:03:47,308 --> 00:03:49,000
Traduzido por [Fernando dos Reis]
Revisado por [Gabriel Mello Fernandes]