Unidad 11. CSS. Fuente y texto. (I)



11.1. Fuente

El texto es fundamental en el diseño de una página web, primero vamos a ver el grupo de propiedades que tienen que ver con el tipo de letra o fuente (font-family, font-style, ...) y después las propiedades que afectan a texto como conjunto de caracteres (color, text-align, ..)

La fuente o tipo de letra o tipografía es la forma de dibujar los caracteres de un alfabeto. Existen multitud de fuentes para cada alfabeto o sistema de escritura, no hay un método universal de denominación y clasificación de las fuentes. CSS proporciona uns sistema para seleccionar y usar fuentes basado en las "familias de fuentes".

11.2. font-family

La propiedad font-family indica la fuente a emplear. La fuente se indica como una lista de valores separados por comas. El navegador intentará utilizar la primera fuente y si no es posible, intentará con las siguientes. Se puede dar un valor de fuente de dos formas: Familia de fuentes y fuentes genéricas.

- Famila de fuentes, se indica el nombre concreto de la fuente, como "Times New Roman", Arial, Verdana, etc. Si el nombre tiene espacios, irá entre comillas.

- Fuente genérica se indica un conjunto de fuentes similares, por ejemplo, sans-serif, es un grupo de fuentes sin "remates", pertenecen a este tipo Arial, Verdana, Helvetica, ... Otra fuente genérica es serif, "con remates", pertenecen a este tipo Times, Times New Roman, ... Otras fuentes genéricas son monospace, sans-serif, cursive, fantasy. Por lo tanto, al indicar una fuente genérica el navegador podrá utilizar una de las fuentes disponibles pertenecientes a ese tipo. En los dispositivos siempre habrá disponible una fuente genérica.

Si utilizamos una fuente común, como "Times New Roman", Arial, Verdana, siempre van a estar disponibles. Si utilizamos fuentes menos comunes, lo más recomendable es escribir primero esas familias de fuentes menos comunes que más nos interesen, a continuación una fuente común y poner al final una fuente genérica.

Por ejemplo: font-family: "Myriad Pro", Helvetica, Arial, "sans-serif". En este caso se intentará utilizar la fuente "Myriad Pro", si no está instalada en el dispositivo, se intentará utilizar Helvetica, y si no es posible se utilizará una fuente del tipo sans-erif.

font-family: 'Myriad Pro', Helvetica, 'sans-serif'. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro.

11.3. Fuentes web

Como hemos dicho las fuentes deben estar disponibles en el momento de utilizarlas. En el dispositivo que utilicemos (ordenador, tablet, móvil, etc.) ya están instaladas las fuentes más comunes. Si en nuestra página utilizamos una fuente nueva o poco común debemos asegurarnos que esté disponible para todos los usuarios que visiten la página. Podemos lograrlo de dos formas, utilizando unas fuentes web o instalando la fuente en nuestro servidor web

1. Utilizando una fuente web. Es decir, la fuente se descargará de internet en el momento de usarla.

La forma más usual de hacerlo es utilizando las fuentes web de Google.

Para ello debemos visitar la web https://fonts.google.com/ y seguir la instrucciones. Básicamente se trata de elegir una fuente de las disponibles y seguir unos de estos dos métodos:

Colocar un enlace a la web de Google indicando la fuente elegida, se hace desde la cabecera de la página HTML.

Por ejemplo, para la fuente Aldrich.

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

Importar la fuente en nuestra hoja de estilos desde la web de Google.

Por ejemplo:

<style> @import url('https://fonts.googleapis.com/css?family=Aldrich'); </style>

En ambos casos la fuente se usa como cualquier otra fuente: font-family: 'Aldrich';

fuente Aldrich de Google Fonts

2. Instalando la fuente en nuestro servido web y colocando el enlace en nuestra hoja de estilos. Este método es un poco más complejo pero nos aseguramos de tener el control de la fuente, sin depender que esté disponible un servidor distinto al nuestro.

Lo primero es tener el archivo de la fuente en formato .woff y .woof2 que son los recomendados para que funcionen en la mayoría de navegadores. Desde la página de Google Fonts, por defecto, se descarga el archivo en formato .tiff, que podemos pasar a formato .woof desde esta página Font Squirel. Aunque también podemos descargar directamente desde la página de Google Fonts en formato .woff con este truco que se explica en Mclibre.org

A continuación debemos subir los archivos .woff y .woof2 a nuestro servidor web y hacerlos accesibles desde nuestra página con un código similar a este:

<style>
  @font-face {
    font-family: 'Aldrich';
    src: url('Aldrich/aldrich-regular-webfont.woff2') format('woff2'),
         url('Aldrich/aldrich-regular-webfont.woff') format('woff');
  }
</style>

En src colocamos la ruta donde se encuentan los archivos .woff y .woof2

Igual que antes, la fuente se usa como cualquier otra fuente: font-family: 'Aldrich';

 


Enero-2019 (V 2.01)
Pág. 11.1
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.