Activa JavaScript para disfrutar de los vídeos de la Mediateca.
CSS3 - Propiedad fuentes (Family-font y Google Fonts) - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Vale, ahora vamos a ver cómo añadir fuentes que no estén instaladas normalmente dentro de un navegador, ¿vale?
00:00:01
Esto es interesante o importante porque nos permite un nivel de personalización más alto de nuestra web, ¿vale?
00:00:09
Hasta el punto de poder utilizar fuentes que habitualmente no están instaladas en los puentes, ¿vale?
00:00:17
Para ello vamos a utilizar, vamos a aprovecharnos de la API de Google, ¿vale?
00:00:23
Google tiene ya un repositorio donde hay un montón de fuentes y vamos a aprovecharnos de ello, ¿vale?
00:00:27
Entonces, vamos a partir de nuestro archivo con el que hemos ido trabajando todo el rato, ¿vale?
00:00:35
Lo voy a abrir, ¿vale? Nuestro archivo de fuentes, ¿vale?
00:00:42
Que lo estéis viendo en pantalla, mientras voy viendo el Chrome también para que lo veáis.
00:00:52
aquí está, ya se aparece
00:00:57
¿vale? entonces nos vamos a ir a Google
00:01:00
y en Google vamos a escribir
00:01:02
Google Fonts ¿vale?
00:01:04
Google
00:01:09
vamos aquí
00:01:09
Google Fonts
00:01:11
¿vale? entonces fijaros
00:01:15
vamos a ir a la primera opción que es
00:01:16
fonts.google.com ¿vale?
00:01:18
¿ok? y dentro de estas fuentes
00:01:23
que estáis viendo pues vamos a
00:01:24
buscar una que se llama Orbitron
00:01:26
¿vale? esta que estáis viendo
00:01:28
entonces fijaros como
00:01:30
el utilizar esta fuente es muy sencillo
00:01:34
simplemente
00:01:36
la fuente en concreto nos da varias opciones
00:01:37
aquí estoy viendo que está regular
00:01:41
a 400, medio a 500
00:01:42
semivola a 600
00:01:44
es decir que estos son los grosores de los que hablábamos
00:01:45
antes, yo puedo elegir
00:01:49
todos los estilos
00:01:51
todo este estilo, puedo elegir solo algunos
00:01:52
en mi caso me voy a quedar con el regular
00:01:54
A ver si se puede ver. Me voy a quedar con el regular y con el bot, ¿vale? Y fijaros que me aparecen aquí, en la parte de la derecha, me aparecen los elementos con los que me quedan. Voy a ver si puedo disminuir la ventana para que lo veáis. Creo que ahora se ve, ¿vale?
00:01:57
si, vale, veis aquí
00:02:19
aparece en la parte de la derecha los dos elementos
00:02:24
que se pueden escoger, vale
00:02:26
y voy a
00:02:27
a ver, vale
00:02:29
vale, se está viendo perfecto, entonces
00:02:31
¿qué vamos a hacer?
00:02:33
pues fijaros que nos aparecen dos elementos, vale
00:02:36
en primer lugar vamos a coger
00:02:38
esta zona de link, que estos, fijaros
00:02:40
que es lo mismo
00:02:42
que utilizábamos cuando metíamos hojas de estilo
00:02:43
externa, vale, pues lo vamos a coger
00:02:46
y en nuestro archivo de html
00:02:48
justo debajo antes del style
00:02:50
vamos a poner aquí ese link
00:02:54
y para poder utilizarlo ahora
00:02:57
vamos a modificar por ejemplo
00:03:01
solo los elementos h1 y h2
00:03:04
entonces vamos a copiar todo esto
00:03:07
que es la propiedad de hojas de estilo
00:03:09
la font-family
00:03:11
y fijaros voy a poner h1, h2
00:03:12
para modificar solo esas
00:03:17
las cabeceras
00:03:19
y pongo font-frame
00:03:21
¿vale? y fijaros como
00:03:23
automáticamente ya me
00:03:25
aparece la fuente que acabo
00:03:27
con en la Orbitron ¿vale?
00:03:30
es muy sencillo
00:03:32
aquí tenéis un catálogo de fuentes
00:03:33
muy bestia ¿vale? muy grande
00:03:35
pues simplemente es que busquéis
00:03:37
aquellas que a vosotros os puedan gustar más
00:03:39
o os puedan gustar menos ¿vale?
00:03:41
bueno, pues lo dicho
00:03:45
un saludo
00:03:47
Gracias.
00:03:49
- Autor/es:
- Fernando Martínez Martí
- Subido por:
- Fernando M.
- Licencia:
- Reconocimiento - No comercial - Compartir igual
- Visualizaciones:
- 110
- Fecha:
- 2 de febrero de 2021 - 23:05
- Visibilidad:
- Público
- Centro:
- IES EL BURGO - IGNACIO ECHEVERRÍA
- Duración:
- 03′ 54″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 14.75 MBytes
