[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.51,0:00:05.22,Default,,0000,0000,0000,,Você já viu como alterar a cor de fundo e\Na cor do texto na página. Dialogue: 0,0:00:05.30,0:00:08.68,Default,,0000,0000,0000,,Mas você pode fazer muito mais\Ncom o texto em CSS. Dialogue: 0,0:00:09.51,0:00:11.63,Default,,0000,0000,0000,,Para começar, vamos alterar a fonte. Dialogue: 0,0:00:12.58,0:00:15.92,Default,,0000,0000,0000,,O que é uma fonte? Você provavelmente já\Nsabe o que é, mas você pode Dialogue: 0,0:00:15.92,0:00:17.21,Default,,0000,0000,0000,,não saber com essa palavra. Dialogue: 0,0:00:17.24,0:00:19.66,Default,,0000,0000,0000,,Fonte é o estilo das letras que formam\Nas palavras. Dialogue: 0,0:00:19.80,0:00:22.100,Default,,0000,0000,0000,,Se as letras têm flores sobre elas,\Nou qual a espessura dela, Dialogue: 0,0:00:23.18,0:00:25.56,Default,,0000,0000,0000,,ou se elas parecem que são escritas com\Numa caneta. Dialogue: 0,0:00:25.88,0:00:30.27,Default,,0000,0000,0000,,Será mais fácil se eu mudar o tipo de\Nletra nesta página. Dialogue: 0,0:00:30.66,0:00:35.44,Default,,0000,0000,0000,,Vou usar {\i1}< p >{\i0} como regra CSS que\Nseleciona todos os parágrafos, Dialogue: 0,0:00:35.73,0:00:38.43,Default,,0000,0000,0000,,e adicionar um propriedade\N{\i1}font-family{\i0} (família de fontes) aqui. Dialogue: 0,0:00:38.79,0:00:41.13,Default,,0000,0000,0000,,{\i1}font-family: sans-serif;{\i0} Dialogue: 0,0:00:41.82,0:00:43.83,Default,,0000,0000,0000,,Viu como as letras mudaram\Nquando fiz isso? Dialogue: 0,0:00:44.12,0:00:45.80,Default,,0000,0000,0000,,Elas parecem mais simples agora. Dialogue: 0,0:00:47.29,0:00:52.18,Default,,0000,0000,0000,,Agora vou mudar a {\i1}font-family{\i0} de volta\Nespecificando dessa vez a {\i1}serif{\i0}. Dialogue: 0,0:00:52.28,0:00:55.90,Default,,0000,0000,0000,,Percebeu que as letras ficaram um pouco\Nmais complexas? Dialogue: 0,0:00:55.90,0:00:59.86,Default,,0000,0000,0000,,Uma fonte {\i1}serif{\i0} são aquelas fontes que\Nparecem com uns "pezinhos" nas letras. Dialogue: 0,0:00:59.98,0:01:04.27,Default,,0000,0000,0000,,Quando dizemos ao navegador para usar uma\N{\i1}font-family serif{\i0}, ele usará o padrão Dialogue: 0,0:01:04.27,0:01:07.22,Default,,0000,0000,0000,,{\i1}serif{\i0} para o computador. Que normalmente\Né a fonte "Times New Roman". Dialogue: 0,0:01:08.59,0:01:11.08,Default,,0000,0000,0000,,Não sou um grande fã desse tipo de letra,\Nno entanto, Dialogue: 0,0:01:11.08,0:01:13.11,Default,,0000,0000,0000,,vou mudá-la de volta agora\Npara {\i1}sans-serif{\i0}. Dialogue: 0,0:01:14.25,0:01:17.81,Default,,0000,0000,0000,,O 'sans' vem do latim e significa "sem". Dialogue: 0,0:01:17.100,0:01:21.81,Default,,0000,0000,0000,,Assim, uma fonte {\i1}sans-serif{\i0} é aquela que\Nnão tem aqueles "pezinhos" nas letras. Dialogue: 0,0:01:22.10,0:01:23.72,Default,,0000,0000,0000,,É por isso que são mais simples. Dialogue: 0,0:01:24.18,0:01:27.94,Default,,0000,0000,0000,,Quando dizemos ao navegador para usar uma\N{\i1}font-family sans-serif{\i0}, ele usa Dialogue: 0,0:01:27.94,0:01:33.14,Default,,0000,0000,0000,,o padrão {\i1}sans-serif{\i0} para esse computador,\Nque normalmente é 'Arial' ou 'Helvetica'. Dialogue: 0,0:01:33.14,0:01:37.71,Default,,0000,0000,0000,,Mas aqui está um ponto importante:\NEle vai escolher a fonte padrão Dialogue: 0,0:01:37.71,0:01:41.22,Default,,0000,0000,0000,,do computador, e não a do autor da página. Dialogue: 0,0:01:41.55,0:01:45.26,Default,,0000,0000,0000,,Assim, podemos muito bem estar vendo duas\Nfontes {\i1}sans-serif{\i0} diferentes agora, Dialogue: 0,0:01:45.32,0:01:47.60,Default,,0000,0000,0000,,se o seu sistema tem um padrão\Ndiferente do meu. Dialogue: 0,0:01:47.60,0:01:54.33,Default,,0000,0000,0000,,Às vezes, tudo bem, mas tem vez que eu\Nquero que o visitante da página veja Dialogue: 0,0:01:54.33,0:01:56.26,Default,,0000,0000,0000,,exatamente as mesmas fontes\Ncomo eu vejo. Dialogue: 0,0:01:56.70,0:02:01.98,Default,,0000,0000,0000,,Nesse caso, posso especificar precisamente\No nome da fonte. Por exemplo, 'Helvetica'. Dialogue: 0,0:02:03.15,0:02:07.94,Default,,0000,0000,0000,,Isto vai funcionar, desde que você e eu\Ntenhamos Helvetica em nossos computadores. Dialogue: 0,0:02:08.44,0:02:12.64,Default,,0000,0000,0000,,Mas nem todos os computadores têm as\Nmesmas fontes, nesse caso o computador irá Dialogue: 0,0:02:12.71,0:02:14.04,Default,,0000,0000,0000,,ignorar essa propriedade . Dialogue: 0,0:02:14.75,0:02:20.03,Default,,0000,0000,0000,,Felizmente o CSS nos permite especificar\Numa {\i1}font-family{\i0} de reserva no caso de uma Dialogue: 0,0:02:20.06,0:02:22.30,Default,,0000,0000,0000,,fonte específica não existir em\Num computador. Dialogue: 0,0:02:22.98,0:02:28.00,Default,,0000,0000,0000,,Colocamos uma vírgula depois de Helvetica\Ne em seguida colocamos {\i1}sans-serif{\i0}. Dialogue: 0,0:02:28.44,0:02:32.74,Default,,0000,0000,0000,,Agora, o computador procurará Helvetica,\Ne se não encontrá-la, ele vai usar a sua Dialogue: 0,0:02:32.74,0:02:34.44,Default,,0000,0000,0000,,fonte padrão {\i1}sans-serif{\i0}. Dialogue: 0,0:02:35.07,0:02:39.30,Default,,0000,0000,0000,,Geralmente, quando você especificar uma\Nfonte específica como Helvetica, você deve Dialogue: 0,0:02:39.32,0:02:42.74,Default,,0000,0000,0000,,sempre especificar um nome de reserva \Nda família também. Dialogue: 0,0:02:44.45,0:02:48.35,Default,,0000,0000,0000,,Além da {\i1}serif{\i0} e {\i1}sans-serif{\i0} há um par de\Noutros nomes de {\i1}font-family{\i0} genérica Dialogue: 0,0:02:48.35,0:02:49.50,Default,,0000,0000,0000,,que podemos usar. Dialogue: 0,0:02:50.10,0:02:56.60,Default,,0000,0000,0000,,Se quiséssemos nossas letras manuscritas,\Npodemos especificar {\i1}font-family: cursive{\i0}. Dialogue: 0,0:02:58.27,0:03:03.87,Default,,0000,0000,0000,,Se quiséssemos as letras mais chiques,\Npodemos tentar a {\i1}font-family: fantasy{\i0}. Dialogue: 0,0:03:04.94,0:03:08.30,Default,,0000,0000,0000,,Ou se queremos que pareçam que\Nforam escritas numa máquina de escrever? Dialogue: 0,0:03:08.30,0:03:11.12,Default,,0000,0000,0000,,Poderíamos especificar a\N{\i1}font-family: monospace{\i0}. Dialogue: 0,0:03:11.20,0:03:15.18,Default,,0000,0000,0000,,A fonte 'monospace' é de largura fixa,\No que significa que todas as letras ocupam Dialogue: 0,0:03:15.20,0:03:16.31,Default,,0000,0000,0000,,a mesma largura exata. Dialogue: 0,0:03:16.48,0:03:20.05,Default,,0000,0000,0000,,De fato, você já viu um monte de fontes\N'monospace' aqui na Khan Academy, Dialogue: 0,0:03:20.26,0:03:23.33,Default,,0000,0000,0000,,porque sempre usamos a fonte 'monospace'\Npara editores de código. Dialogue: 0,0:03:23.100,0:03:27.08,Default,,0000,0000,0000,,Isso é porque queremos que todo o nosso\Ncódigo esteja alinhado, Dialogue: 0,0:03:27.22,0:03:28.49,Default,,0000,0000,0000,,independente das palavras. Dialogue: 0,0:03:29.48,0:03:33.31,Default,,0000,0000,0000,,Agora que você sabe como alterar o tipo\Nde letra, use seu poder com sabedoria. Dialogue: 0,0:03:33.45,0:03:37.79,Default,,0000,0000,0000,,Se quer uma boa aparência para sua página,\Nuse só algumas famílias diferentes, Dialogue: 0,0:03:37.100,0:03:40.34,Default,,0000,0000,0000,,e chegue a um par de fontes que\Nficam bem juntas. Dialogue: 0,0:03:40.96,0:03:44.91,Default,,0000,0000,0000,,Mas se não quiser uma boa aparência,\Nentão ela vai ficar feia igual uma ostra. Dialogue: 0,0:03:45.69,0:03:47.31,Default,,0000,0000,0000,,Vá em frente e mãos à obra. Dialogue: 0,0:03:47.31,0:03:49.00,Default,,0000,0000,0000,,Traduzido por [Fernando dos Reis]\NRevisado por [Gabriel Mello Fernandes]