1
00:00:01,010 --> 00:00:08,830
Bueno, y ahora vamos a ver las dos últimas propiedades de fuente que vamos a estudiar, que son la font-family y font, ¿vale?

2
00:00:09,369 --> 00:00:15,009
En primer lugar, vamos a empezar con la font-family, ¿vale?

3
00:00:16,289 --> 00:00:22,989
Como siempre, seguimos partiendo del mismo fichero de brackets, ¿vale?

4
00:00:22,989 --> 00:00:24,809
El que estábamos trabajando.

5
00:00:32,840 --> 00:00:34,740
Este que veis en pantalla, ¿vale?

6
00:00:34,979 --> 00:00:42,460
Y bueno, vamos a ver esta propiedad, ¿vale?

7
00:00:43,179 --> 00:00:45,960
Nos vamos a venir al principio de style, ¿vale?

8
00:00:46,079 --> 00:00:54,859
Y aquí vamos a poner un comentario que va a ser propiedad font-family, ¿vale?

9
00:00:55,500 --> 00:01:01,359
Y lo que voy a hacer ahora es modificar las fuentes solo de, por ejemplo, de la etiqueta h1 y h2.

10
00:01:01,359 --> 00:01:06,459
Entonces, como yo quiero hacer un selector múltiple, ¿vale?

11
00:01:06,540 --> 00:01:09,280
Pues le pondría h1, h2, ¿vale?

12
00:01:09,599 --> 00:01:13,500
Y de esta forma esto afectaría tanto al h1 como a todos los h2.

13
00:01:13,799 --> 00:01:18,140
Y yo voy a poner, por ejemplo, aquí font-family, ¿vale?

14
00:01:18,480 --> 00:01:22,120
Y puedo elegir, por ejemplo, un tipo de familia que es aria, ¿vale?

15
00:01:22,640 --> 00:01:29,560
Y fijaros que aquí solo se me modifica la fuente h1 y h2, ¿vale?

16
00:01:29,560 --> 00:01:36,780
Si yo quisiera hacer una modificación sobre toda la página web, tendría que modificar el body, ¿vale?

17
00:01:36,780 --> 00:01:37,519
El elemento body.

18
00:01:37,659 --> 00:01:43,159
Entonces, en vez de poner aquí H1 y H2, yo pondría aquí body, ¿vale?

19
00:01:43,260 --> 00:01:45,519
Y fijaros que ahora sí se modifica, ¿vale?

20
00:01:46,299 --> 00:01:50,359
Importante que os fijéis en el hecho de que aquí, para este tipo de fuentes,

21
00:01:50,500 --> 00:01:54,980
si hay una diferencia entre el phone weight de 900 y el phone weight volt, ¿vale?

22
00:01:55,959 --> 00:01:58,180
Los numéricos, pues cada vez se notará más o menos.

23
00:01:58,180 --> 00:02:03,870
Vale, cosas importantes que tenemos que saber de FontFamily

24
00:02:03,870 --> 00:02:10,789
En FontFamily es muy importante que establezcamos varios tipos de fuentes

25
00:02:10,789 --> 00:02:14,629
En caso que no estuviesen instalados en el navegador, ¿vale?

26
00:02:15,129 --> 00:02:18,669
Por las circunstancias que se den en el navegador, no, en el PC de la persona que lo ve

27
00:02:18,669 --> 00:02:20,710
O en el teléfono móvil, en cualquier cosa, ¿vale?

28
00:02:20,710 --> 00:02:24,310
Es muy importante que lo tengamos siempre en cuenta

29
00:02:24,310 --> 00:02:27,409
Entonces, para eso simplemente en nuestra página web

30
00:02:27,409 --> 00:02:30,849
Nosotros pondríamos ARIA y pondríamos una coma

31
00:02:30,849 --> 00:02:34,189
Y pondríamos, por ejemplo, aquí TAFOMA, que es otro tipo de fuente

32
00:02:34,189 --> 00:02:34,610
¿Vale?

33
00:02:37,020 --> 00:02:39,740
De hecho, podéis ver todas esas modificaciones

34
00:02:39,740 --> 00:02:41,120
TAFOMA

35
00:02:41,120 --> 00:02:43,599
Y, por ejemplo, VERDAD

36
00:02:43,599 --> 00:02:43,919
¿Vale?

37
00:02:45,340 --> 00:02:48,199
Y como mínimo hay que poner tres tipos de fuente

38
00:02:48,199 --> 00:02:48,659
¿Vale?

39
00:02:49,060 --> 00:02:49,860
Como mínimo

40
00:02:49,860 --> 00:02:52,520
Entonces

41
00:02:52,520 --> 00:02:57,939
¿Qué más? ¿Qué más? ¿Qué más?

42
00:02:57,939 --> 00:03:03,460
Y también es importante que al final pongáis la familia de la fuente, ¿vale?

43
00:03:03,560 --> 00:03:09,439
La familia de la fuente hay en hojas de estilo y principalmente cinco familias, ¿vale?

44
00:03:09,659 --> 00:03:13,000
Que os voy a mostrar ahora mismo en pantalla, ¿vale?

45
00:03:13,919 --> 00:03:16,020
Aquí lo estáis viendo, ¿vale?

46
00:03:16,419 --> 00:03:18,340
Entonces está la familia Serif, ¿vale?

47
00:03:18,419 --> 00:03:24,439
Que son aquellas caraceres los que terminan como un ejercicio de decoración al final de cada fuente.

48
00:03:24,439 --> 00:03:26,699
La familia Sans Serif, ¿vale?

49
00:03:26,699 --> 00:03:33,400
Que sería recta. La familia monospace, en los que cada carácter ocupa el mismo tamaño en horizontal, ¿vale?

50
00:03:33,419 --> 00:03:35,719
La O ocupa lo mismo que la M, lo mismo que la N.

51
00:03:36,800 --> 00:03:43,180
La familia cursive, que sería como una escritura a mano, y la familia fantasy, que es una familia más decorativa, ¿vale?

52
00:03:44,759 --> 00:03:46,979
Eso para que lo tengáis en cuenta, ¿vale?

53
00:03:48,219 --> 00:03:54,639
Entonces, es importante que al final del todo, vosotros siempre coloquéis esa opción, ¿vale?

54
00:03:54,639 --> 00:03:57,979
En este caso, pues como esto es una familia Saint-Cédric, ¿vale?

55
00:03:58,240 --> 00:04:01,900
Porque no tiene decoración al final, pues yo pondría eso, ¿vale?

56
00:04:03,580 --> 00:04:06,939
Eso es importante que siempre lo hagamos, ¿vale?

57
00:04:06,979 --> 00:04:08,280
Es una costumbre importante.

58
00:04:09,300 --> 00:04:15,560
Yo os dejaré en el aula virtual, os voy a dejar un archivo

59
00:04:15,560 --> 00:04:22,540
donde vais a ver los tipos de combinaciones más utilizadas en hojas de estilo, ¿vale?

60
00:04:22,759 --> 00:04:25,860
Con diferentes cuentos.

61
00:04:26,139 --> 00:04:31,439
Tanto en Sans Serif, como en Serif, como en MonoSpace, como en Cursiva, como en Fantasy.

62
00:04:31,959 --> 00:04:39,100
Aquí, por ejemplo, voy a hacer un ejemplo del tipo de fuentes que se pueden utilizar en Fantasy para que veáis también la diferencia.

63
00:04:42,439 --> 00:04:46,120
Os voy a poner otro ejemplo de lo que sería en Cursiva.

64
00:04:54,790 --> 00:04:56,769
Esto sería en Cursiva.

65
00:04:56,769 --> 00:05:02,370
como veis un estilo que parece más la escritura

66
00:05:02,370 --> 00:05:04,670
manual

67
00:05:04,670 --> 00:05:07,189
un estilo que sería

68
00:05:07,189 --> 00:05:08,810
en monospace

69
00:05:08,810 --> 00:05:14,100
que ya digo que esto todo

70
00:05:14,100 --> 00:05:16,500
ocupa el mismo tamaño en horizontal

71
00:05:16,500 --> 00:05:22,100
y un estilo

72
00:05:22,100 --> 00:05:23,639
que sería en seril

73
00:05:23,639 --> 00:05:27,899
ya digo que esto os lo dejaré

74
00:05:27,899 --> 00:05:29,860
colgado en el aula virtual para que

75
00:05:29,860 --> 00:05:31,939
lo tengáis vosotros para que pongáis el estilo que más

76
00:05:31,939 --> 00:05:33,180
os guste en cada parte

77
00:05:33,180 --> 00:05:38,420
y por último voy a dejar ese estilo mismo

78
00:05:38,420 --> 00:05:39,980
fijaros que cuando

79
00:05:39,980 --> 00:05:41,959
la fuente, en este caso por ejemplo

80
00:05:41,959 --> 00:05:44,139
para TinoLinotype, cuando la fuente

81
00:05:44,139 --> 00:05:45,860
ocupa dos palabras hay que ponerlo entre comillas

82
00:05:45,860 --> 00:05:47,740
eso es importante también

83
00:05:47,740 --> 00:05:50,339
sin embargo fijaros que aquí

84
00:05:50,339 --> 00:05:51,459
para Tino no parece eso

85
00:05:51,459 --> 00:05:54,180
y la última propiedad

86
00:05:54,180 --> 00:05:58,019
para la última propiedad vamos a añadir

87
00:05:58,019 --> 00:05:59,680
un último elemento, vamos a poner aquí

88
00:05:59,680 --> 00:06:00,540
una cabecera

89
00:06:00,540 --> 00:06:04,060
propiedad font

90
00:06:04,060 --> 00:06:04,899
¿vale?

91
00:06:05,839 --> 00:06:07,740
y vamos a poner un elemento tip

92
00:06:07,740 --> 00:06:09,620
que es un contenedor, como ya sabemos

93
00:06:09,620 --> 00:06:11,339
y un párrafo dentro

94
00:06:11,339 --> 00:06:13,439
con el texto

95
00:06:13,439 --> 00:06:15,180
Lorem Ix, ¿vale?

96
00:06:20,069 --> 00:06:24,470
¿ok? entonces

97
00:06:24,470 --> 00:06:26,310
¿qué es lo que hace la propiedad P?

98
00:06:26,529 --> 00:06:27,550
pues la propiedad P

99
00:06:27,550 --> 00:06:30,449
para que vosotros lo

100
00:06:30,449 --> 00:06:32,410
veáis, le voy a poner

101
00:06:32,410 --> 00:06:34,029
la propiedad P, perdón, la propiedad font

102
00:06:34,029 --> 00:06:37,850
digamos que es un resumen

103
00:06:37,850 --> 00:06:40,089
de todo el resto de propiedad, ¿vale?

104
00:06:40,470 --> 00:06:45,189
Y la sintaxis sería, voy a poner aquí comentarios también, ¿vale?

105
00:06:46,089 --> 00:06:48,870
Nosotros pondríamos font, dos puntos, ¿vale?

106
00:06:49,410 --> 00:06:54,029
Y justo después del font, lo que vamos a poner es el font style, ¿vale?

107
00:06:54,829 --> 00:06:59,509
Pondríamos un espacio y después del font style pondríamos el font vario.

108
00:07:00,110 --> 00:07:04,209
Pondríamos otro espacio y después el font weight.

109
00:07:04,209 --> 00:07:07,870
otro espacio, font-size

110
00:07:07,870 --> 00:07:09,750
y otro espacio, y por último

111
00:07:09,750 --> 00:07:11,490
font-parm, ¿vale?

112
00:07:12,430 --> 00:07:13,529
Entonces, si nosotros

113
00:07:13,529 --> 00:07:15,449
no lo llevamos ahora a nuestro elemento actual,

114
00:07:15,610 --> 00:07:16,629
como queremos modificar,

115
00:07:16,730 --> 00:07:21,110
como queremos modificar

116
00:07:21,110 --> 00:07:23,649
un elemento p que está dentro de un elemento div,

117
00:07:24,029 --> 00:07:25,269
recuerdo, ponemos primero div,

118
00:07:25,389 --> 00:07:26,949
espacio y p, ¿vale?

119
00:07:27,569 --> 00:07:28,449
Y ahora,

120
00:07:29,589 --> 00:07:31,810
pues ponemos en primer lugar, vamos a poner

121
00:07:31,810 --> 00:07:33,610
font, dos puntos,

122
00:07:33,610 --> 00:07:35,930
vale, entonces como lo primero

123
00:07:35,930 --> 00:07:37,870
que queremos hacer es cambiar

124
00:07:37,870 --> 00:07:39,569
el estilo, pues vamos a poner aquí por ejemplo

125
00:07:39,569 --> 00:07:41,069
italic, vale

126
00:07:41,069 --> 00:07:54,589
vale

127
00:07:54,589 --> 00:08:02,480
un segundito

128
00:08:02,480 --> 00:08:22,389
vale

129
00:08:22,389 --> 00:08:24,009
entonces como decía

130
00:08:24,009 --> 00:08:26,610
ponemos el font, después del font

131
00:08:26,610 --> 00:08:28,329
vamos a poner italic

132
00:08:28,329 --> 00:08:30,850
dejamos un espacio

133
00:08:30,850 --> 00:08:32,490
en blanco

134
00:08:32,490 --> 00:08:34,570
vale, y vamos a poner el font

135
00:08:34,570 --> 00:08:36,429
variant, que en este caso voy a poner small

136
00:08:36,429 --> 00:08:38,049
caps, vale

137
00:08:38,049 --> 00:08:40,389
para que aparezca

138
00:08:40,389 --> 00:08:44,549
un segundito que creo que no está

139
00:08:44,549 --> 00:08:46,769
cogiendo los cambios

140
00:08:46,769 --> 00:08:52,210
no volver a abrir

141
00:08:52,210 --> 00:08:57,159
no me los está cogiendo

142
00:08:57,159 --> 00:08:58,980
¿por qué no me los está cogiendo?

143
00:09:18,019 --> 00:09:18,980
vamos a ver

144
00:09:18,980 --> 00:09:20,639
font

145
00:09:20,639 --> 00:09:22,340
italic

146
00:09:22,340 --> 00:09:23,860
small caps

147
00:09:23,860 --> 00:09:24,940
vamos a ver

148
00:09:24,940 --> 00:09:29,799
¿qué más vamos a poner?

149
00:09:29,919 --> 00:09:31,519
en font-weight vamos a poner bold

150
00:09:31,519 --> 00:09:33,659
en font-size vamos a poner 2

151
00:09:33,659 --> 00:09:34,940
red

152
00:09:34,940 --> 00:09:37,200
y en font-family

153
00:09:37,200 --> 00:09:38,419
pues vamos a poner

154
00:09:38,419 --> 00:09:40,899
una familia de

155
00:09:40,899 --> 00:09:42,059
sans-serif, ¿vale?

156
00:09:42,860 --> 00:09:44,019
que va a ser, por ejemplo

157
00:09:44,019 --> 00:09:47,899
esta

158
00:09:47,899 --> 00:09:49,539
¿vale?

159
00:09:51,820 --> 00:09:53,500
y ponemos un punticoma

160
00:09:53,500 --> 00:09:54,940
al final, eso era, ¿vale?

161
00:09:54,960 --> 00:09:57,720
porque cuando ponemos el font tenemos que poner el punticoma

162
00:09:57,720 --> 00:09:59,460
¿vale? entonces fijaros que al

163
00:09:59,460 --> 00:10:01,360
ponerlo, pues ya me ha cogido todo

164
00:10:01,360 --> 00:10:02,399
ese elemento, ¿vale?

165
00:10:03,860 --> 00:10:12,580
Entonces, digamos que esta forma sirve para, en una misma línea, poner todas las modificaciones de estilo que queramos, ¿vale?

166
00:10:12,740 --> 00:10:18,139
Y lo que hace es que permite que se ejecute más rápido dentro del navegador, ¿vale?

167
00:10:19,360 --> 00:10:21,519
¿Ok? Y que cargue las páginas más bien.

168
00:10:22,240 --> 00:10:27,580
Pero fijaros que básicamente lo que hay que hacer es repetir todos los que hemos visto antes, pero ponerlos todos en la misma línea, ¿vale?

169
00:10:27,659 --> 00:10:30,299
Siempre siguiendo esta sintaxis que es un marco aquí.

170
00:10:31,320 --> 00:10:31,559
¿Ok?

171
00:10:33,860 --> 00:10:34,179
Muy bien.