Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS3 - Propiedad Fuentes (Family-font) - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 2 de febrero de 2021 por Fernando M.

109 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, y ahora vamos a ver las dos últimas propiedades de fuente que vamos a estudiar, que son la font-family y font, ¿vale? 00:00:01
En primer lugar, vamos a empezar con la font-family, ¿vale? 00:00:09
Como siempre, seguimos partiendo del mismo fichero de brackets, ¿vale? 00:00:16
El que estábamos trabajando. 00:00:22
Este que veis en pantalla, ¿vale? 00:00:32
Y bueno, vamos a ver esta propiedad, ¿vale? 00:00:34
Nos vamos a venir al principio de style, ¿vale? 00:00:43
Y aquí vamos a poner un comentario que va a ser propiedad font-family, ¿vale? 00:00:46
Y lo que voy a hacer ahora es modificar las fuentes solo de, por ejemplo, de la etiqueta h1 y h2. 00:00:55
Entonces, como yo quiero hacer un selector múltiple, ¿vale? 00:01:01
Pues le pondría h1, h2, ¿vale? 00:01:06
Y de esta forma esto afectaría tanto al h1 como a todos los h2. 00:01:09
Y yo voy a poner, por ejemplo, aquí font-family, ¿vale? 00:01:13
Y puedo elegir, por ejemplo, un tipo de familia que es aria, ¿vale? 00:01:18
Y fijaros que aquí solo se me modifica la fuente h1 y h2, ¿vale? 00:01:22
Si yo quisiera hacer una modificación sobre toda la página web, tendría que modificar el body, ¿vale? 00:01:29
El elemento body. 00:01:36
Entonces, en vez de poner aquí H1 y H2, yo pondría aquí body, ¿vale? 00:01:37
Y fijaros que ahora sí se modifica, ¿vale? 00:01:43
Importante que os fijéis en el hecho de que aquí, para este tipo de fuentes, 00:01:46
si hay una diferencia entre el phone weight de 900 y el phone weight volt, ¿vale? 00:01:50
Los numéricos, pues cada vez se notará más o menos. 00:01:55
Vale, cosas importantes que tenemos que saber de FontFamily 00:01:58
En FontFamily es muy importante que establezcamos varios tipos de fuentes 00:02:03
En caso que no estuviesen instalados en el navegador, ¿vale? 00:02:10
Por las circunstancias que se den en el navegador, no, en el PC de la persona que lo ve 00:02:15
O en el teléfono móvil, en cualquier cosa, ¿vale? 00:02:18
Es muy importante que lo tengamos siempre en cuenta 00:02:20
Entonces, para eso simplemente en nuestra página web 00:02:24
Nosotros pondríamos ARIA y pondríamos una coma 00:02:27
Y pondríamos, por ejemplo, aquí TAFOMA, que es otro tipo de fuente 00:02:30
¿Vale? 00:02:34
De hecho, podéis ver todas esas modificaciones 00:02:37
TAFOMA 00:02:39
Y, por ejemplo, VERDAD 00:02:41
¿Vale? 00:02:43
Y como mínimo hay que poner tres tipos de fuente 00:02:45
¿Vale? 00:02:48
Como mínimo 00:02:49
Entonces 00:02:49
¿Qué más? ¿Qué más? ¿Qué más? 00:02:52
Y también es importante que al final pongáis la familia de la fuente, ¿vale? 00:02:57
La familia de la fuente hay en hojas de estilo y principalmente cinco familias, ¿vale? 00:03:03
Que os voy a mostrar ahora mismo en pantalla, ¿vale? 00:03:09
Aquí lo estáis viendo, ¿vale? 00:03:13
Entonces está la familia Serif, ¿vale? 00:03:16
Que son aquellas caraceres los que terminan como un ejercicio de decoración al final de cada fuente. 00:03:18
La familia Sans Serif, ¿vale? 00:03:24
Que sería recta. La familia monospace, en los que cada carácter ocupa el mismo tamaño en horizontal, ¿vale? 00:03:26
La O ocupa lo mismo que la M, lo mismo que la N. 00:03:33
La familia cursive, que sería como una escritura a mano, y la familia fantasy, que es una familia más decorativa, ¿vale? 00:03:36
Eso para que lo tengáis en cuenta, ¿vale? 00:03:44
Entonces, es importante que al final del todo, vosotros siempre coloquéis esa opción, ¿vale? 00:03:48
En este caso, pues como esto es una familia Saint-Cédric, ¿vale? 00:03:54
Porque no tiene decoración al final, pues yo pondría eso, ¿vale? 00:03:58
Eso es importante que siempre lo hagamos, ¿vale? 00:04:03
Es una costumbre importante. 00:04:06
Yo os dejaré en el aula virtual, os voy a dejar un archivo 00:04:09
donde vais a ver los tipos de combinaciones más utilizadas en hojas de estilo, ¿vale? 00:04:15
Con diferentes cuentos. 00:04:22
Tanto en Sans Serif, como en Serif, como en MonoSpace, como en Cursiva, como en Fantasy. 00:04:26
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. 00:04:31
Os voy a poner otro ejemplo de lo que sería en Cursiva. 00:04:42
Esto sería en Cursiva. 00:04:54
como veis un estilo que parece más la escritura 00:04:56
manual 00:05:02
un estilo que sería 00:05:04
en monospace 00:05:07
que ya digo que esto todo 00:05:08
ocupa el mismo tamaño en horizontal 00:05:14
y un estilo 00:05:16
que sería en seril 00:05:22
ya digo que esto os lo dejaré 00:05:23
colgado en el aula virtual para que 00:05:27
lo tengáis vosotros para que pongáis el estilo que más 00:05:29
os guste en cada parte 00:05:31
y por último voy a dejar ese estilo mismo 00:05:33
fijaros que cuando 00:05:38
la fuente, en este caso por ejemplo 00:05:39
para TinoLinotype, cuando la fuente 00:05:41
ocupa dos palabras hay que ponerlo entre comillas 00:05:44
eso es importante también 00:05:45
sin embargo fijaros que aquí 00:05:47
para Tino no parece eso 00:05:50
y la última propiedad 00:05:51
para la última propiedad vamos a añadir 00:05:54
un último elemento, vamos a poner aquí 00:05:58
una cabecera 00:05:59
propiedad font 00:06:00
¿vale? 00:06:04
y vamos a poner un elemento tip 00:06:05
que es un contenedor, como ya sabemos 00:06:07
y un párrafo dentro 00:06:09
con el texto 00:06:11
Lorem Ix, ¿vale? 00:06:13
¿ok? entonces 00:06:20
¿qué es lo que hace la propiedad P? 00:06:24
pues la propiedad P 00:06:26
para que vosotros lo 00:06:27
veáis, le voy a poner 00:06:30
la propiedad P, perdón, la propiedad font 00:06:32
digamos que es un resumen 00:06:34
de todo el resto de propiedad, ¿vale? 00:06:37
Y la sintaxis sería, voy a poner aquí comentarios también, ¿vale? 00:06:40
Nosotros pondríamos font, dos puntos, ¿vale? 00:06:46
Y justo después del font, lo que vamos a poner es el font style, ¿vale? 00:06:49
Pondríamos un espacio y después del font style pondríamos el font vario. 00:06:54
Pondríamos otro espacio y después el font weight. 00:07:00
otro espacio, font-size 00:07:04
y otro espacio, y por último 00:07:07
font-parm, ¿vale? 00:07:09
Entonces, si nosotros 00:07:12
no lo llevamos ahora a nuestro elemento actual, 00:07:13
como queremos modificar, 00:07:15
como queremos modificar 00:07:16
un elemento p que está dentro de un elemento div, 00:07:21
recuerdo, ponemos primero div, 00:07:24
espacio y p, ¿vale? 00:07:25
Y ahora, 00:07:27
pues ponemos en primer lugar, vamos a poner 00:07:29
font, dos puntos, 00:07:31
vale, entonces como lo primero 00:07:33
que queremos hacer es cambiar 00:07:35
el estilo, pues vamos a poner aquí por ejemplo 00:07:37
italic, vale 00:07:39
vale 00:07:41
un segundito 00:07:54
vale 00:08:02
entonces como decía 00:08:22
ponemos el font, después del font 00:08:24
vamos a poner italic 00:08:26
dejamos un espacio 00:08:28
en blanco 00:08:30
vale, y vamos a poner el font 00:08:32
variant, que en este caso voy a poner small 00:08:34
caps, vale 00:08:36
para que aparezca 00:08:38
un segundito que creo que no está 00:08:40
cogiendo los cambios 00:08:44
no volver a abrir 00:08:46
no me los está cogiendo 00:08:52
¿por qué no me los está cogiendo? 00:08:57
vamos a ver 00:09:18
font 00:09:18
italic 00:09:20
small caps 00:09:22
vamos a ver 00:09:23
¿qué más vamos a poner? 00:09:24
en font-weight vamos a poner bold 00:09:29
en font-size vamos a poner 2 00:09:31
red 00:09:33
y en font-family 00:09:34
pues vamos a poner 00:09:37
una familia de 00:09:38
sans-serif, ¿vale? 00:09:40
que va a ser, por ejemplo 00:09:42
esta 00:09:44
¿vale? 00:09:47
y ponemos un punticoma 00:09:51
al final, eso era, ¿vale? 00:09:53
porque cuando ponemos el font tenemos que poner el punticoma 00:09:54
¿vale? entonces fijaros que al 00:09:57
ponerlo, pues ya me ha cogido todo 00:09:59
ese elemento, ¿vale? 00:10:01
Entonces, digamos que esta forma sirve para, en una misma línea, poner todas las modificaciones de estilo que queramos, ¿vale? 00:10:03
Y lo que hace es que permite que se ejecute más rápido dentro del navegador, ¿vale? 00:10:12
¿Ok? Y que cargue las páginas más bien. 00:10:19
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? 00:10:22
Siempre siguiendo esta sintaxis que es un marco aquí. 00:10:27
¿Ok? 00:10:31
Muy bien. 00:10:33
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
109
Fecha:
2 de febrero de 2021 - 23:04
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
10′ 35″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
36.33 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid