1
00:00:01,020 --> 00:00:07,590
Então, este vídeo vai se concentrar em fontes no sucesso e, obviamente, se divertir e escolher fontes para uma

2
00:00:07,580 --> 00:00:09,880
página da web é realmente muito importante.

3
00:00:10,110 --> 00:00:14,660
Mas também vamos cobrir muitas outras propriedades relacionadas a fontes e ao texto.

4
00:00:14,730 --> 00:00:23,470
E essas são fonte de fontes tamanho da fonte tamanho da fonte linha de altura texto uma linha e decoração de texto.

5
00:00:23,610 --> 00:00:26,530
Então, neste vídeo, vamos parar e cobrir todos esses.

6
00:00:26,730 --> 00:00:32,670
E a primeira coisa que vamos fazer é obter o nosso texto simples que vamos usar.

7
00:00:33,030 --> 00:00:39,080
Então eu tenho um Funk simples que é Jim M-file e vou seguir em frente e adicionar na sua boca.

8
00:00:39,080 --> 00:00:42,660
Então eu vou fazer uma H-1 para que possamos ver um cabeçalho e um estilo.

9
00:00:42,750 --> 00:00:44,180
E depois alguns parágrafos.

10
00:00:44,490 --> 00:00:51,720
Então, eu vou chamar a página de demonstração desta fonte e, em seguida, a próxima coisa, em vez de apenas

11
00:00:51,720 --> 00:00:57,450
digitar algumas palavras aleatórias ou algumas críticas como essa, que realmente não refletem realmente a aparência

12
00:00:57,450 --> 00:00:59,580
da língua inglesa em uma página.

13
00:00:59,620 --> 00:01:02,610
Eu vou usar um gerador Lorem Epsom.

14
00:01:02,610 --> 00:01:08,640
Então, para aqueles que não sabem que os geradores Lorem Ipsum são usados ​​para gerar um monte de texto aleatório que

15
00:01:08,730 --> 00:01:09,980
são palavras em inglês.

16
00:01:09,990 --> 00:01:13,550
Isso não significa nada, mas, pelo menos, parece palavras reais.

17
00:01:13,560 --> 00:01:15,570
Portanto, é o texto do espaço reservado.

18
00:01:16,110 --> 00:01:23,310
Então eu tenho um tipo de artigo engraçado aberto de 10 dos melhores ou mais divertidos geradores de Lorem Ipsum

19
00:01:23,310 --> 00:01:24,350
para web designers.

20
00:01:24,570 --> 00:01:30,480
E eu irei com este primeiro bacon ipsum, então vou gerar alguns parágrafos aqui.

21
00:01:31,560 --> 00:01:31,910
Rápido.

22
00:01:31,920 --> 00:01:34,370
Me dê bacon e você pode vê-lo, apenas me dê algum texto.

23
00:01:34,470 --> 00:01:41,080
Mas este é um texto real que realmente parece um potencial, você sabe algo que você teria em

24
00:01:41,070 --> 00:01:41,670
um site.

25
00:01:41,700 --> 00:01:43,430
Não parece apenas um jibberish como este.

26
00:01:43,440 --> 00:01:45,890
Então, é uma melhor representação de uma fonte.

27
00:01:46,110 --> 00:01:48,010
Então eu vou seguir em frente e colar isso.

28
00:01:48,120 --> 00:01:52,100
Eu vou fazer dois parágrafos sobre isso.

29
00:01:54,140 --> 00:01:54,570
Tudo bem.

30
00:01:54,570 --> 00:01:59,510
E vamos deixar isso por enquanto e vamos voltar e adicionar um pouco mais tarde.

31
00:01:59,670 --> 00:02:02,580
Vamos abrir isso e ver o que temos.

32
00:02:03,300 --> 00:02:03,720
ESTÁ BEM.

33
00:02:03,750 --> 00:02:08,670
Então, aqui está um site que iremos denominar e a primeira coisa que queremos fazer é falar sobre

34
00:02:09,030 --> 00:02:11,840
como, na verdade, simplesmente atribuímos uma fonte a qualquer coisa.

35
00:02:12,180 --> 00:02:17,790
E antes que possamos fazer isso, temos que falar sobre o tipo de fonte que ainda temos disponível no navegador.

36
00:02:18,510 --> 00:02:23,370
Portanto, não há uma resposta fácil sobre quais fontes um computador está disponível no navegador.

37
00:02:23,550 --> 00:02:26,420
E é porque eles são diferentes em cada máquina.

38
00:02:26,670 --> 00:02:28,360
E eu tenho este site aberto aqui.

39
00:02:28,640 --> 00:02:30,070
Ela diz pilha de fontes.

40
00:02:30,270 --> 00:02:34,250
Isso realmente mostra dependendo se você estiver em um Mac ou Windows.

41
00:02:34,350 --> 00:02:38,280
Qual é a porcentagem dessas máquinas que têm uma fonte específica.

42
00:02:38,670 --> 00:02:42,820
E isso é apenas um tipo de fontes padrão da web que veremos o maior tempo.

43
00:02:42,840 --> 00:02:51,030
Então, se olharmos para um como Helvetica, você pode ver que todos os Mac têm a América, mas muito poucos

44
00:02:51,450 --> 00:02:52,130
Windows instalados.

45
00:02:52,290 --> 00:02:55,430
E estas são as fontes do sistema que aparecem em uma máquina.

46
00:02:55,950 --> 00:03:00,650
Portanto, essas não são as únicas fontes que você pode usar, mas estas são algumas das apostas mais seguras.

47
00:03:00,660 --> 00:03:05,790
Então, se você quisesse um que ele sabia com certeza trabalharia em cada máquina que você escolheria

48
00:03:06,270 --> 00:03:07,590
como Arial preto ou aéreo.

49
00:03:08,160 --> 00:03:10,310
Obviamente, essas fontes são bastante limitadas.

50
00:03:10,350 --> 00:03:14,030
Então, vamos ver como realmente incluímos fontes personalizadas mais tarde neste vídeo.

51
00:03:14,130 --> 00:03:16,230
Mas, por enquanto, vamos escolher um desses.

52
00:03:16,260 --> 00:03:19,750
Então, vamos com Ariel Sharon Ariel.

53
00:03:20,010 --> 00:03:24,720
Então, para usar isso, vamos atribuir isso aos nossos parágrafos aqui.

54
00:03:25,370 --> 00:03:27,700
Então, vamos entrar no meu C S S, que eu liguei aqui.

55
00:03:27,720 --> 00:03:31,840
Estilos que C S S e a propriedade são chamados de família de fontes.

56
00:03:32,040 --> 00:03:40,820
Então eu vou selecionar parágrafos e vou dizer que a família de fontes é Arial assim.

57
00:03:41,060 --> 00:03:46,390
E se eu atualizar, você verá que agora tenho fonte Arial aqui.

58
00:03:46,410 --> 00:03:51,830
Uma nota rápida eu também posso colocar citações sobre isso que é totalmente válido.

59
00:03:51,840 --> 00:03:57,200
Às vezes você terá que fazer isso se você tiver uma fonte que tenha um número no início.

60
00:03:57,200 --> 00:04:02,160
Não que esta seja uma fonte real, mas se fosse isso, eu teria que colocar cotações em torno dela

61
00:04:02,160 --> 00:04:04,360
porque esta não é uma linha CSSA válida.

62
00:04:04,830 --> 00:04:10,660
OK para que eu possa dar isso a Aeriel assim e você pode ver a Aeriel.

63
00:04:10,830 --> 00:04:12,970
Então, existem outras fontes com as quais você pode brincar.

64
00:04:12,990 --> 00:04:16,340
Vamos tentar a Geórgia.

65
00:04:16,800 --> 00:04:19,290
Então, vamos dar a

66
00:04:24,150 --> 00:04:28,520
nossa H-1 Georgia exatamente como essa atualização.

67
00:04:28,860 --> 00:04:33,100
E você pode vê-lo mudar de fonte, então não se desespere se você é designer.

68
00:04:33,120 --> 00:04:36,810
Nós vamos ver como usar muito mais fontes e como incluir as personalizadas.

69
00:04:37,110 --> 00:04:42,390
Mas, por enquanto, só nos concentraremos nas fontes padrão do sistema, que são um pouco limitadas.

70
00:04:42,600 --> 00:04:48,780
E, mesmo assim, não há garantia, pois você pode ver que não há nenhuma que 100 por cento das máquinas tenham, então a próxima

71
00:04:51,570 --> 00:04:57,370
propriedade da qual eu quero falar é o tamanho da fonte, então o tamanho da fonte parece que ele controla o tamanho

72
00:04:57,490 --> 00:05:00,990
da fonte ou a pequena dimensão A fonte é de um determinado elemento.

73
00:05:01,240 --> 00:05:07,230
Então, podemos selecionar algo e vamos fazê-lo para o nosso H-1 e vamos fazer cada um muito maior.

74
00:05:07,590 --> 00:05:12,460
Então, fazemos o tamanho da fonte e existem diferentes unidades que podemos usar.

75
00:05:12,450 --> 00:05:18,170
E o primeiro é chamado de pixels ou picos e já o vimos um pouco antes com o Forder.

76
00:05:18,330 --> 00:05:25,770
Então, vamos apenas dar algo de enorme como 200 fotos e se voltarmos para o navegador, você pode

77
00:05:25,770 --> 00:05:31,740
ver se conseguimos essa diversão gigantesca de 200 pixels, o que podemos fazer, por exato.

78
00:05:31,750 --> 00:05:35,640
Se você quer brincar com tamanhos de fonte, não tem certeza de quão grande você quer que isso seja.

79
00:05:35,680 --> 00:05:36,610
85 ou

80
00:05:40,410 --> 00:05:46,470
o que quer que desejamos e podemos brincar no navegador e vê-lo A mudança refletiu imediatamente.

81
00:05:46,470 --> 00:05:55,190
Nós podemos inspecioná-lo e então podemos ir até aqui e podemos clicar nisso e podemos alterar esse número para que possamos mudar

82
00:05:55,200 --> 00:05:57,010
para 100 ou 60 ou

83
00:05:57,270 --> 00:06:01,570
Então, esse é um recurso muito bom quando você está jogando com tamanhos de fonte.

84
00:06:01,560 --> 00:06:06,310
Então, como mencionei, porém, essa não é a única maneira de escolher um tamanho de fonte.

85
00:06:06,450 --> 00:06:07,650
Não é a única unidade.

86
00:06:07,900 --> 00:06:15,730
Há outra unidade popular chamada IEMs e E-M é basicamente um tamanho de fonte relativo.

87
00:06:15,840 --> 00:06:23,250
Então eu vou seguir em frente e abrir o tamanho da fonte M. ler daqui por um momento o tamanho de um valor EM

88
00:06:23,250 --> 00:06:29,790
é dinâmico e EM é igual ao tamanho da fonte que se aplica ao pai do elemento em questão .

89
00:06:29,790 --> 00:06:33,500
D e página e vá para a seção EM e vou

90
00:06:33,880 --> 00:06:36,900
Então o que isso realmente significa é que eu vou mostrar um exemplo rápido.

91
00:06:37,320 --> 00:06:47,580
Se eu colocar, vamos dentro daqui debaixo do bife de tira Eu vou colocar um elemento de extensão em tudo o que um espaço

92
00:06:47,580 --> 00:06:48,120
faz.

93
00:06:48,120 --> 00:06:50,300
Esta é provavelmente a nossa primeira vez que os vemos.

94
00:06:50,380 --> 00:06:57,510
É apenas uma maneira de agrupar texto em conjunto, sem realmente fazer a diferença visual, por isso é apenas uma maneira

95
00:06:57,510 --> 00:07:01,050
de fazer um elemento em torno da palavra strip steak.

96
00:07:01,050 --> 00:07:03,470
Mas se eu atualizar.

97
00:07:03,510 --> 00:07:04,710
Nada muda.

98
00:07:04,750 --> 00:07:09,230
Bem, a busca do tamanho da fonte, mas nada muda aqui e onde eu tenho essa extensão.

99
00:07:09,780 --> 00:07:13,540
Então é uma maneira de destacar ou selecionar uma linha e depois fazer algo com isso.

100
00:07:13,550 --> 00:07:15,620
E nós vamos fazer isso muito mais grande.

101
00:07:16,020 --> 00:07:22,890
Então, usamos um E-M ou usamos as unidades E-M e estamos se quisermos fazer isso o dobro do tamanho

102
00:07:22,890 --> 00:07:26,380
da fonte deste parágrafo que acabamos de entrar aqui.

103
00:07:26,520 --> 00:07:38,290
Então, espere e depois digamos o tamanho da fonte 2. 0 E-M e, assim, será o dobro do tamanho da fonte do elemento

104
00:07:38,460 --> 00:07:41,940
inclusivo do elemento pai que é este parágrafo.

105
00:07:41,940 --> 00:07:49,220
Então, você verá que aqui se eu atualizar este intervalo é o dobro do tamanho da fonte deste.

106
00:07:49,240 --> 00:07:53,170
Mas na verdade, na verdade, não explicamos o número de pixels para fazê-lo.

107
00:07:53,160 --> 00:07:56,430
Só sabia o quão grande era isso e depois dobrou.

108
00:07:56,440 --> 00:08:02,430
Então, isso é dinâmico, e é por isso que muitas pessoas gostam disso é que, se por algum

109
00:08:02,440 --> 00:08:05,930
motivo eu precisava mudar o tamanho da fonte, isso mudaria automaticamente.

110
00:08:06,190 --> 00:08:08,320
Então, deixe-me mostrar-lhe outro exemplo.

111
00:08:08,460 --> 00:08:12,600
Vamos aumentar o tamanho da fonte do

112
00:08:16,800 --> 00:08:27,140
tamanho da fonte do parágrafo e vamos fazer 40 pixels e você pode ver que isso ainda permanece duplo.

113
00:08:27,150 --> 00:08:32,410
Então, a única pergunta sobre o E-M que surge muito é qual é o valor inicial de v e qual

114
00:08:32,400 --> 00:08:33,500
é o nível superior.

115
00:08:33,580 --> 00:08:38,840
Porque não podemos simplesmente seguir herdando de um pai e esse pai, tem que haver alguma fonte de verdade.

116
00:08:38,860 --> 00:08:45,120
Tem que haver como no elemento de nível superior que realmente tem um tamanho de fonte e que realmente

117
00:08:45,660 --> 00:08:48,580
muda dependendo do navegador que seja um pouco frustrante.

118
00:08:49,050 --> 00:08:55,480
Mas, de acordo com a SDN, geralmente tem cerca de 16 pixels, de modo que não há garantia, mas geralmente é de cerca de

119
00:08:55,480 --> 00:08:56,060
16 pixels.

120
00:08:56,160 --> 00:09:01,680
Então, o que a maioria das pessoas faria é definir um tamanho de fonte no corpo no início.

121
00:09:01,950 --> 00:09:07,960
Então, algo parecido com esse tamanho de fonte do corpo.

122
00:09:08,220 --> 00:09:16,860
E vamos dar um vamos fazer algo realmente pequeno para começar como 10 pixels e então deve

123
00:09:16,890 --> 00:09:23,560
mudar ou cada um para que seja cinco vezes maior do que o corpo.

124
00:09:23,620 --> 00:09:30,330
Então, isso vai parecer cinco porno E-M e então vamos no nosso parágrafo para ser duas vezes maior do que

125
00:09:30,340 --> 00:09:31,090
o corpo.

126
00:09:31,120 --> 00:09:33,000
Então, 2. 0 E-M.

127
00:09:33,180 --> 00:09:37,230
E, finalmente, queremos que nossa extensão seja duas vezes maior do que um parágrafo.

128
00:09:37,360 --> 00:09:40,810
Então, isso também é 2. 0 porque lembre-se que está aninhado dentro.

129
00:09:41,080 --> 00:09:46,710
Então, vamos fazer algum texto fora de um parágrafo assim e você verá que é muito pequeno.

130
00:09:47,010 --> 00:09:50,080
E então, fizemos isso cinco vezes maior do que isso.

131
00:09:50,160 --> 00:09:51,820
Fizemos isso duas vezes maior.

132
00:09:52,000 --> 00:09:54,300
E isso é duas vezes maior do que o parágrafo