Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017·  

Tipografía

Algunas veces nos encontramos con un tipo de fuente que nos resulta bonita, si la utilizamos en nuestro sitio Web probablemente sólo nosotros la vemos (porque sólo está en nuestro ordenador). Es decir, la tipografía de una página web se ve tal y como es si dicha fuente está instalada en el el ordenador del usuario que está visitando la página.

Puesto que no todas las fuentes están disponibles en todos los ordenadores (hay miles de fuentes, y la mayoría no son gratuitas), CSS nos ofrece un mecanismo para indicar fuentes alternativas: se indica primero la fuente deseada y a continuación todas las que puedan sustituir a la primera, si ésta no estuviera disponible; la lista debería terminar con el nombre de una familia de fuente (W3C define cinco familias: serif, sans-serif, monospace, cursive y fantasy).

Hay una lista de tipografías estándares que los navegadores más polulares saben interpretar, pero... ¿y el resto de tipografías, las podemos utilizar?. La respuesta es sí, salvando dos inconvenientes: técnico y de copyright; vamos a ver como resolver el primero, el segundo se explica por sí solo.

Desde hace un tiempo existen varias alternativas para poder emplear tipografía "no estandar" como utilizar la propiedad @font-face de CSS3. No obstante la manera más fácil de utilizar fuentes distintas a las que los navegadores reconocen por defecto es usar la API de Google Font.

La API de Google Font

En Google Font podemos elegir entre cientos de tipos, y algunos hay bastante interesantes: ver

Para utilizar una de estas fuentes podemos utilizar 2 métodos:

MÉTODO 1:

Añadimos esta línea en el archivo HTML, sección head:


<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

Evidentemente cambiaremos "Pacifico" por el nombre de la tipografía que deseamos utilizar (estos nombres aparecen en la página de Google Font). Si queremos usar más de un tipo lo indicamos como parametros separados por la barra vertical |.

MÉTODO 2:

Añadir esta línea al comenzar nuestro archivo .css


@import url('https://fonts.googleapis.com/css?family=Pacifico');

Para cualquiera de los dos métodos, seguídamente tenemos que activar la tipografía instalada en alguna regla CSS de nuestro archivo de estilos, por ejemplo en los encabezados de nivel 1:


h1 {font-family: Pacifico;}

Conviene señalar que si el nombre de la fuente se compone de más de una palabra, es necesario escribir el nombre entre comillas.

Ejemplo

See the Pen Tipografía by Jesús Plaza M. (@3con14) on CodePen.

La propiedad @font-face de CSS3

Los responsable de la normativa CSS se están tomando en serio todo el asunto de la tipografía y CSS3 define la propiedad font-face, una propiedad que permite definir cualquier tipografía en base al archivo fuente de la misma.

La propiedad @font-face es muy útil para definir en un sitio Web una fuente que el usuario no tenga instalada en su ordenador. El método consiste en subir la fuente que queremos utilizar a nuestro sitio Web y definirla utilizando CSS.

Para el tipo de fuente se pueden usar el formato OpenType (.otf) o TrueType (.tff) y hay muchos sitios donde podemos descargar gratuitamente fuentes de los dos formatos, algunos de éstos son: http://www.sostars.com/ , http://www.1001freefonts.com/ , http://www.fonts.com, etc...

La propiedad @font-face está soportada por la mayoría de los navegadores actuales.

Para utilizar un tipo de fuente "no estandar" seguimos estos pasos:

  1. Conseguimos el archivo .otf o .tff de la fuente que nos guste
  2. Declaramos en el archivo de estilos CSS la fuente
  3. Creamos la regla CSS que la use
  4. Colocamos la "marca" correspondiente en el archivo HTML

 

 

Etiquetas: HTML5, CSS3

Imprimir

En línea...

Hay 11 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

0.png8.png4.png4.png7.png
Hoy ........21
Ayer .......13
Mes ........154

Lunes, 11 Diciembre 2017