Cargando

Ir a contenido


 


HTML5 – Trabajando con Fuentes - Parte1

En este tutorial vamos a ver un poco que podemos hacer en HTML con CSS para así modificar las fuentes de nuestros textos y por ende cambiar el aspecto de nuestras páginas haciéndolas más legibles o incorporando las letras en el efecto del diseño.


Escrito por el oct 16 2013 21:58 html5 fuentes html5


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:
  • 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.
Seleccionando una fuente

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
Muy bien ya que hemos cubierto el aspecto teórico de lo que es el manejo de fuentes veamos ejemplos con código que es donde obtendremos nuestro conocimiento de cómo poner en practica todo lo que hemos estudiado:


<!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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado oct 16 2013 21:58
  •   Actualizado oct 16 2013 23:15
  •   Visitas 964
  •   Nivel
    Intermedio



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse