1
00:00:01,020 --> 00:00:07,590
Así que este video se enfocará en las fuentes de éxito y, obviamente, divertirse y elegir fuentes para una

2
00:00:07,580 --> 00:00:09,880
página web es realmente muy importante.

3
00:00:10,110 --> 00:00:14,660
Pero también cubriremos muchas otras propiedades relacionadas con las fuentes y el texto.

4
00:00:14,730 --> 00:00:23,470
Y esos son fuente, fuente, tamaño, fuente, peso, línea, altura, texto, una línea y decoración de texto.

5
00:00:23,610 --> 00:00:26,530
Entonces en este video vamos a parar y cubrir todos esos.

6
00:00:26,730 --> 00:00:32,670
Y lo primero que vamos a hacer es obtener nuestro texto simple que vamos a estilizar.

7
00:00:33,030 --> 00:00:39,080
Así que tengo un Funk sencillo que es Jim M-file y voy a seguir adelante y agregarlo a tu boca.

8
00:00:39,080 --> 00:00:42,660
Así que solo voy a hacer un H-1 para que podamos ver un encabezado y estilo.

9
00:00:42,750 --> 00:00:44,180
Y luego algunos párrafos.

10
00:00:44,490 --> 00:00:51,720
Así que voy a llamar a la página de demostración de esta fuente y luego a lo siguiente, en lugar de simplemente

11
00:00:51,720 --> 00:00:57,450
escribir algunas palabras al azar o un jibberish como este, que en realidad no refleja el aspecto

12
00:00:57,450 --> 00:00:59,580
del idioma inglés en una página.

13
00:00:59,620 --> 00:01:02,610
Voy a usar un generador de Lorem Epsom.

14
00:01:02,610 --> 00:01:08,640
Entonces, para aquellos de ustedes que no saben, los generadores de Lorem Ipsum se utilizan para generar un montón de texto aleatorio

15
00:01:08,730 --> 00:01:09,980
que son palabras en inglés.

16
00:01:09,990 --> 00:01:13,550
No significa nada, pero al menos parece palabras reales.

17
00:01:13,560 --> 00:01:15,570
Entonces es texto de marcador de posición.

18
00:01:16,110 --> 00:01:23,310
Así que tengo un artículo bastante divertido, abierto de 10 de los mejores o más divertidos generadores de Lorem Ipsum

19
00:01:23,310 --> 00:01:24,350
para diseñadores web.

20
00:01:24,570 --> 00:01:30,480
Y voy a ir con este primer tocino ipsum, así que voy a generar algunos párrafos aquí.

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

22
00:01:31,920 --> 00:01:34,370
Dame tocino y puedes verlo solo dame un poco de texto.

23
00:01:34,470 --> 00:01:41,080
Pero este es un texto real que realmente parece un potencial, usted sabe algo que tendría en un

24
00:01:41,070 --> 00:01:41,670
sitio web.

25
00:01:41,700 --> 00:01:43,430
No parece jibberish como este.

26
00:01:43,440 --> 00:01:45,890
Entonces es una mejor representación de una fuente.

27
00:01:46,110 --> 00:01:48,010
Así que voy a seguir adelante y pegar eso.

28
00:01:48,120 --> 00:01:52,100
Voy a hacer dos párrafos de esto.

29
00:01:54,140 --> 00:01:54,570
Todo bien.

30
00:01:54,570 --> 00:01:59,510
Y lo dejaremos así por ahora y volveremos y lo agregaremos un poco más tarde.

31
00:01:59,670 --> 00:02:02,580
Vamos a abrir esto y ver lo que tenemos.

32
00:02:03,300 --> 00:02:03,720
DE ACUERDO.

33
00:02:03,750 --> 00:02:08,670
Así que aquí hay un sitio que vamos a diseñar y lo primero que queremos hacer es

34
00:02:09,030 --> 00:02:11,840
hablar sobre cómo asignamos una fuente a cualquier cosa.

35
00:02:12,180 --> 00:02:17,790
Y antes de que podamos hacer eso, tenemos que hablar sobre la fuente que tenemos disponible en el navegador.

36
00:02:18,510 --> 00:02:23,370
Por lo tanto, no hay una respuesta fácil sobre qué fuentes tiene una computadora disponible en el navegador.

37
00:02:23,550 --> 00:02:26,420
Y eso es porque son diferentes en cada máquina.

38
00:02:26,670 --> 00:02:28,360
Y tengo este sitio abierto aquí.

39
00:02:28,640 --> 00:02:30,070
Ella dice que las fuentes se apilan.

40
00:02:30,270 --> 00:02:34,250
Eso realmente se muestra dependiendo de si estás en una Mac o Windows.

41
00:02:34,350 --> 00:02:38,280
¿Cuál es el porcentaje de esas máquinas que tienen una fuente determinada?

42
00:02:38,670 --> 00:02:42,820
Por lo tanto, estos son solo tipos de fuentes web estándar que veremos la mayor parte del tiempo.

43
00:02:42,840 --> 00:02:51,030
Entonces, si observamos uno como Helvetica, puede ver que todas las Mac tienen América pero se han instalado muy

44
00:02:51,450 --> 00:02:52,130
pocas ventanas.

45
00:02:52,290 --> 00:02:55,430
Y entonces estas son las fuentes del sistema que vienen en una máquina.

46
00:02:55,950 --> 00:03:00,650
Estas no son las únicas fuentes que puede usar, pero estas son algunas de las que son más seguras.

47
00:03:00,660 --> 00:03:05,790
Entonces, si querías uno que él supiera con certeza, funcionaría en todas las máquinas que elegirías como

48
00:03:06,270 --> 00:03:07,590
Arial negro o aéreo.

49
00:03:08,160 --> 00:03:10,310
Obviamente, estas fuentes son bastante limitadas.

50
00:03:10,350 --> 00:03:14,030
Así que vamos a ver cómo en realidad incluimos las fuentes personalizadas más adelante en este video.

51
00:03:14,130 --> 00:03:16,230
Pero por ahora vamos a elegir uno de estos.

52
00:03:16,260 --> 00:03:19,750
Así que vamos con Ariel Sharon Ariel.

53
00:03:20,010 --> 00:03:24,720
Entonces, para usar eso, vamos a asignar eso a nuestros párrafos aquí.

54
00:03:25,370 --> 00:03:27,700
Así que vamos a entrar en mi C S que he vinculado aquí.

55
00:03:27,720 --> 00:03:31,840
Estilos que C S S y la propiedad se llaman familia de fuentes.

56
00:03:32,040 --> 00:03:40,820
Así que voy a seleccionar párrafos y voy a decir que la familia de fuentes es Arial así.

57
00:03:41,060 --> 00:03:46,390
Y si actualizo verás que ahora tengo la fuente Arial aquí.

58
00:03:46,410 --> 00:03:51,830
Una nota rápida también puedo poner citas alrededor de esto, que es totalmente válido.

59
00:03:51,840 --> 00:03:57,200
A veces tendrás que hacer esto si tienes una fuente que tiene un número al principio.

60
00:03:57,200 --> 00:04:02,160
No es que sea una fuente real, pero si fuera así, tendría que ponerle comillas porque esta

61
00:04:02,160 --> 00:04:04,360
no es una línea válida de CSSA.

62
00:04:04,830 --> 00:04:10,660
OK, así puedo darle Aeriel así y puedes ver que tenemos a Aeriel.

63
00:04:10,830 --> 00:04:12,970
Entonces hay otras fuentes con las que puedes jugar.

64
00:04:12,990 --> 00:04:16,340
Probemos Georgia.

65
00:04:16,800 --> 00:04:19,290
Así que démosle

66
00:04:24,150 --> 00:04:28,520
a nuestra H-1 Georgia esa actualización.

67
00:04:28,860 --> 00:04:33,100
Y puedes ver que cambia de fuente, así que no te desesperes si eres un diseñador.

68
00:04:33,120 --> 00:04:36,810
Vamos a ver cómo usar muchas más fuentes y cómo incluir las personalizadas.

69
00:04:37,110 --> 00:04:42,390
Pero por ahora solo vamos a centrarnos en las fuentes predeterminadas del sistema incorporadas que son un poco limitadas.

70
00:04:42,600 --> 00:04:48,780
Y aun así no hay garantía ya que puede ver que no hay ninguna que tenga el 100 por ciento de las máquinas, así que la

71
00:04:51,570 --> 00:04:57,370
siguiente propiedad de la que quiero hablar es el tamaño de la fuente para que el tamaño de la fuente parezca lo grande que

72
00:04:57,490 --> 00:05:00,990
es la fuente o cuán pequeña sea la fuente es de un elemento dado.

73
00:05:01,240 --> 00:05:07,230
Entonces podemos seleccionar algo y hagámoslo a nuestro H-1 y hagamos que cada uno sea mucho más grande.

74
00:05:07,590 --> 00:05:12,460
Así que hacemos tamaño de fuente y hay diferentes unidades que podemos usar.

75
00:05:12,450 --> 00:05:18,170
Y el primero se llama píxeles o picos y lo hemos visto un poco antes con Forder.

76
00:05:18,330 --> 00:05:25,770
Así que vamos a darle algo así como 200 fotos y si volvemos al navegador, podemos ver si

77
00:05:25,770 --> 00:05:31,740
conseguimos esta gigantesca diversión de 200 píxeles, lo que podemos hacer por las dudas.

78
00:05:31,750 --> 00:05:35,640
Si quieres jugar con los tamaños de fuente, no estás seguro de lo grande que quieres que sea.

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

80
00:05:40,410 --> 00:05:46,470
lo que queramos y podemos jugar en el navegador y simplemente verlo el cambio reflejado inmediatamente.

81
00:05:46,470 --> 00:05:55,190
Podemos inspeccionarlo y luego podemos ir hasta aquí y podemos hacer clic en esto y podemos cambiar este número para poder cambiarlo

82
00:05:55,200 --> 00:05:57,010
a 100 o 60 o

83
00:05:57,270 --> 00:06:01,570
Esa es una característica realmente agradable cuando estás jugando con tamaños de fuente.

84
00:06:01,560 --> 00:06:06,310
Entonces, como mencioné, esta no es la única forma de elegir un tamaño de letra.

85
00:06:06,450 --> 00:06:07,650
No es la única unidad.

86
00:06:07,900 --> 00:06:15,730
Hay otra unidad popular llamada IEMs y E-M es básicamente un tamaño de fuente relativo.

87
00:06:15,840 --> 00:06:23,250
Así que voy a seguir adelante y abrir el tamaño de fuente M. leer desde aquí por solo un momento el tamaño de un valor

88
00:06:23,250 --> 00:06:29,790
EM es dinámico y EM es igual al tamaño de la fuente que se aplica al padre del elemento en cuestión .

89
00:06:29,790 --> 00:06:33,500
D y página e ir a la sección EM y voy a

90
00:06:33,880 --> 00:06:36,900
Entonces, lo que realmente significa es que voy a mostrarte un ejemplo rápido.

91
00:06:37,320 --> 00:06:47,580
Si puse Vamos a entrar aquí debajo de filete de tiras voy a poner un elemento de tramo en todo lo que hace un

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

93
00:06:48,120 --> 00:06:50,300
Esta es probablemente la primera vez que los vemos.

94
00:06:50,380 --> 00:06:57,510
¿Es solo una manera de agrupar texto sin hacer una diferencia visual, por lo que es solo una manera de

95
00:06:57,510 --> 00:07:01,050
hacer un elemento alrededor de la palabra tira de carne.

96
00:07:01,050 --> 00:07:03,470
Pero si me actualizo

97
00:07:03,510 --> 00:07:04,710
Nada cambia en absoluto.

98
00:07:04,750 --> 00:07:09,230
Bueno, la búsqueda del tamaño de fuente pero nada cambia aquí y donde tengo este lapso.

99
00:07:09,780 --> 00:07:13,540
Entonces, es una manera de resaltar o destacar alguna línea y luego hacer algo al respecto.

100
00:07:13,550 --> 00:07:15,620
Y vamos a hacerlo mucho más grande.

101
00:07:16,020 --> 00:07:22,890
Entonces usamos un E-M o usamos las unidades E-M y estamos si quisiéramos duplicar el tamaño de la

102
00:07:22,890 --> 00:07:26,380
fuente de este párrafo que acabamos de ver aquí.

103
00:07:26,520 --> 00:07:38,290
Así que analicemos y luego solo decimos tamaño de fuente 2. 0 E-M y así va a ser el doble del tamaño de fuente del

104
00:07:38,460 --> 00:07:41,940
elemento adjunto del elemento padre que es este párrafo.

105
00:07:41,940 --> 00:07:49,220
Entonces verás que aquí si actualizo este lapso duplica el tamaño de fuente de esto.

106
00:07:49,240 --> 00:07:53,170
Pero en realidad no le dijimos explícitamente cuántos píxeles hacer.

107
00:07:53,160 --> 00:07:56,430
Simplemente sabía lo grande que era y luego lo duplicó.

108
00:07:56,440 --> 00:08:02,430
Así que esto es dinámico y es por eso que a muchas personas les gusta que, si por alguna razón

109
00:08:02,440 --> 00:08:05,930
tuviera que cambiar el tamaño de la fuente, esto cambiaría automáticamente.

110
00:08:06,190 --> 00:08:08,320
Déjame mostrarte otro ejemplo.

111
00:08:08,460 --> 00:08:12,600
Aumentemos el tamaño de fuente del tamaño

112
00:08:16,800 --> 00:08:27,140
de fuente del párrafo y hagamos que sean 40 píxeles y puede ver que esto sigue siendo el doble.

113
00:08:27,150 --> 00:08:32,410
Entonces, la única pregunta sobre E-M que surge mucho es cuál es el valor inicial de v y cuál

114
00:08:32,400 --> 00:08:33,500
es el nivel superior.

115
00:08:33,580 --> 00:08:38,840
Porque no podemos seguir heredando de un padre y ese padre debe haber alguna fuente de verdad.

116
00:08:38,860 --> 00:08:45,120
Tiene que haber como en el elemento de nivel superior que realmente tiene un tamaño de fuente y que realmente

117
00:08:45,660 --> 00:08:48,580
cambia dependiendo del navegador, lo cual es un poco frustrante.

118
00:08:49,050 --> 00:08:55,480
Pero de acuerdo con SDN, suele ser de aproximadamente 16 píxeles, por lo que no es garantía, pero por lo general es de alrededor de

119
00:08:55,480 --> 00:08:56,060
16 píxeles.

120
00:08:56,160 --> 00:09:01,680
Entonces, lo que la mayoría de la gente haría es establecer un tamaño de fuente en el cuerpo desde el principio.

121
00:09:01,950 --> 00:09:07,960
Así que algo así como este tamaño de fuente del cuerpo.

122
00:09:08,220 --> 00:09:16,860
Y vamos a darle a hacer algo realmente pequeño para comenzar como 10 pixeles y luego debemos

123
00:09:16,890 --> 00:09:23,560
cambiar o cada uno para que sea cinco veces más grande que el cuerpo.

124
00:09:23,620 --> 00:09:30,330
Así que se verá como cinco porno E-M y luego vamos en nuestro párrafo para que sea el doble

125
00:09:30,340 --> 00:09:31,090
del cuerpo.

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

127
00:09:33,180 --> 00:09:37,230
Y finalmente, queremos que nuestro tramo sea dos veces más grande que un párrafo.

128
00:09:37,360 --> 00:09:40,810
Entonces eso también es 2. 0 porque recuerda que está anidado dentro.

129
00:09:41,080 --> 00:09:46,710
Así que hagamos un texto fuera de un párrafo así y verá que es bastante pequeño.

130
00:09:47,010 --> 00:09:50,080
Y luego hicimos esto cinco veces más grande que esto.

131
00:09:50,160 --> 00:09:51,820
Hicimos esto dos veces más grande.

132
00:09:52,000 --> 00:09:54,300
Y esto es dos veces más grande que el párrafo