Maquetación y tipografía para web

La regla CSS @font-face

¡Prueba gratis durante 10 días

nuestros 1198 cursos !

Prueba gratis Mostrar modalidades de suscripción
La regla CSS @font-face permite definir cualquier fuente tipográfica e importarla para su uso en una página web. De esta forma, no tenemos que limitarnos a las fuentes por defecto del sistema y podemos seguir aplicándoles todas las propiedades CSS propias para fuentes.
02:34

Transcripción

Vamos a ver la regla CSS @font-face. Usando esta regla –como digo, @font-face– tú puedes alojar en tu servidor cualquier fuente tipográfica y que el usuario se la descargue, al igual que se descarga cuando entra en tu página, las imágenes, aunque él la vea en el navegador, lo que está haciendo realmente es descargar esa imagen a su máquina en un temporal que luego probablemente se eliminará automáticamente para poder visualizar esa imagen. Pues lo mismo, gracias a esta regla @font-face, se puede hacer con una fuente, lo cual fue un gran avance para la tipografía web. Hay que declararla, como digo, en CSS. Gracias a ella, los diseñadores web ya no tenemos que utilizar las "web safe fonts" o las 'fuentes web seguras', sino que podemos acceder a cualquier catálogo de fuentes tipográficas, con lo que nuestros diseños se ven claramente enriquecidos. En esta nueva regla @font-face, primero defines un nombre para la fuente, por ejemplo aquí he puesto "miFuente", y luego le indicamos dónde está esa fuente: pues en mi servidor, en la carpeta Fuentes, miFuente.WOFF, por ejemplo. Esto es lo mismo que se hace para las imágenes, como decía. Con lo cual la descargamos a la máquina del usuario y ya podemos trabajar con ella, ya podemos mostrar la página web con la fuente web que queramos ¿Cómo lo utilizamos? Bueno, pues lo usamos en el HTML. Por ejemplo, declaramos que esta capa, –en este caso, este 'div'– va a utilizar todo lo que se escriba dentro esa capa, va a utilizar miFuente, y luego ya en el HTML, como digo, pues siempre que digamos 'div' y dentro de este 'div' va este texto, pues a este texto se debe aplicar miFuente, que es el nombre que hemos declarado anteriormente en la declaración @font-face. De esta manera, como digo, ya podríamos utilizar cualquier fuente tipográfica en nuestros diseños web, como digo, declarando primero la regla @font-face, declaramos un nombre de fuente y le decimos dónde descargarla y luego la aplicamos como cualquier otra propiedad a cualquier elemento de nuestra página web.

Maquetación y tipografía para web

Aprende cómo seleccionar una fuente óptima para su lectura en pantalla y cómo exprimirla para aprovechar en tus proyectos web todas las posibilidades de las fuentes OpenType.

2:10 horas (25 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:30/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.