Uno de los aspectos fundamentales al momento de trabajar con texto en HTML son los cambios de imagen que pueden ocurrir con tan solo cambiar la fuente de las letras, sin embargo existen dos vertientes de profesionales que trabajan en relación a esto, los diseñadores que desean cambiar cada aspecto de la tipografía y los programadores que a pesar que quieren trabajar con ellas no desean hacer cambios tan profundos sobre esto.
Propiedades de Font
Antes de trabajar con las fuentes vamos a hacer un repaso por sus propiedades para conocer el trasfondo de esto:
La propiedad font-family nos determina el grupo de fuentes que se utilizaran estableciendo un orden de preferencia de modo que si una no está disponible se pasa a la que le sigue en orden de la preferencia. El navegador inicia con la primera fuente del listado y sigue intentando por cada una de las fuentes en el orden establecido hasta que haya una que pueda utilizar.
Esto sucede porque podemos requerir utilizar fuentes que están instaladas en el PC de un usuario o que pertenecen a un sistema operativo en específico, de forma que si otro usuario no cumple con los requisitos podemos controlar como afectara nuestro documento.
Finalmente veamos un listado de fuentes genéricas que deben estar disponibles de forma estándar para todos los sistemas y con las que no deberíamos tener problemas.
En este código vemos que en el font-family se definió una fuente no convencional ya que es una fuente propietaria HelveticaNeue Condensed y luego como segunda preferencia colocamos monospace veamos cómo podemos ver esto en el navegador, para cada uno de los casos definidos.
[attachment=861:html5fuentes.jpg]
A la izquierda de la imagen tenemos el caso en que no existe la fuente que se colocó como primera elección, es decir la fuente monospace, en el lado derecho vemos la fuente propietaria.
Con esto finalizamos el tutorial, habiendo conocido los fundamentos teóricos y puesto en práctica los mismos ya estamos en capacidad de jugar un poco con las fuentes de nuestra aplicación y lograr resultados visualmente más atractivos y acordes con lo que deseamos.
Puedes continar leyendo la Parte 2 de este Tutorial.
Propiedades de Font
Antes de trabajar con las fuentes vamos a hacer un repaso por sus propiedades para conocer el trasfondo de esto:
- font-family: Especifica la familia de la fuente para un bloque de texto.
- font-size: Especifica el tamaño de la fuente para un bloque de texto.
- font-style: Especifica el estilo de la fuente, puede ser normal, italic, oblique.
- font-variant: Especifica si el texto del bloque puede ser o no mostrado en fuente smallcaps, sus valores posibles son smallcaps y normal.
- font-weight: Especifica el peso de la fuente para un bloque de texto, es decir el grosor de la misma, sus valores pueden ser normal, bold, bolder, lighter, <number 100-900>.
- font: Atajo que permite hacer la especificación de la fuente en una sola línea.
La propiedad font-family nos determina el grupo de fuentes que se utilizaran estableciendo un orden de preferencia de modo que si una no está disponible se pasa a la que le sigue en orden de la preferencia. El navegador inicia con la primera fuente del listado y sigue intentando por cada una de las fuentes en el orden establecido hasta que haya una que pueda utilizar.
Esto sucede porque podemos requerir utilizar fuentes que están instaladas en el PC de un usuario o que pertenecen a un sistema operativo en específico, de forma que si otro usuario no cumple con los requisitos podemos controlar como afectara nuestro documento.
Finalmente veamos un listado de fuentes genéricas que deben estar disponibles de forma estándar para todos los sistemas y con las que no deberíamos tener problemas.
- serif
- sans-serif
- cursive
- fantasy
- monospace
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgrey;
margin: 2px;
float: left;
font-family: "HelveticaNeue Condensed", monospace;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500
varieties of banana alone. By the time we add the countless types of
apples, oranges, and other well-known fruit, we are faced with
thousands of choices.
</p>
</body>
</html>
En este código vemos que en el font-family se definió una fuente no convencional ya que es una fuente propietaria HelveticaNeue Condensed y luego como segunda preferencia colocamos monospace veamos cómo podemos ver esto en el navegador, para cada uno de los casos definidos.
[attachment=861:html5fuentes.jpg]
A la izquierda de la imagen tenemos el caso en que no existe la fuente que se colocó como primera elección, es decir la fuente monospace, en el lado derecho vemos la fuente propietaria.
Con esto finalizamos el tutorial, habiendo conocido los fundamentos teóricos y puesto en práctica los mismos ya estamos en capacidad de jugar un poco con las fuentes de nuestra aplicación y lograr resultados visualmente más atractivos y acordes con lo que deseamos.
Puedes continar leyendo la Parte 2 de este Tutorial.
