Cargando



HTML5 – Trabajando con Fuentes - Parte2

En el tutorial pasado vimos las bases teóricas de trabajar con fuentes en HTML5 así como unos ejemplos básicos de su aplicación. En este tutorial iremos más a fondo para sacarle el máximo provecho y aplicarlo a nuestra aplicación.


oct 16 2013 23:19
Avanzado
oct 17 2013 09:06
La fuentes como hemos visto en la Parte1 de este Tutorial son una forma bastante sutil y efectiva para cambiar la forma en que una página HTML se ve, ya sabemos como utilizar un poco el atributo font, ahora vamos a ver las propiedades avanzadas para seguir personalizando nuestros documentos.

Trabajando con el tamaño de las fuentes

Para poder trabajar con el tamaño de las fuentes, CSS nos permite una cantidad de propiedades y atributos con los cuales podemos lograr los efectos que deseamos en nuestra búsqueda de la personalización de nuestros documentos.

Los siguientes atributos nos permiten lograr el cambio de los tamaños.

xx-small x-small small medium large x-large xx-large: Configura el tamaño de la fuente, el navegador es el responsable de establecer el tamaño exacto de las fuentes, a medida que se va avanzando en la lista de opciones se va haciendo mas grande la letra del bloque de texto al cual se le aplica la propiedad.

smaller larger: Establece el tamaño de la fuente, el tamaño que se vaya obteniendo es relativo al elemento padre.

Ahora veamos en código un ejemplo de como aplicar estos nuevos conocimientos:

<!DOCTYPE HTML>
<html>
		 <head>
				 <title>Example</title>
				 <style>
							 p {
									 padding: 5px;
									 border: medium double black;
									 background-color: lightgrey;
									 margin: 2px;
									 float: left;
									 font-family: sans-serif;
									 font-size: medium;
							 }
							 #first {
									 font-size: xx-large;
									 }
							 #second {
									 font-size: larger;
							 }
				 </style>
		 </head>
<body>
		 <p>
				 There are lots of different kinds of fruit - there are over 500
				 varieties of <span id="first">banana</span> alone. By the time we add the
				 countless types of <span id="second">apples, oranges, and other
				 well-known fruit, we are faced with thousands of choices</span>.
		 </p>
</body>
</html>

En este código utilizamos los dos tipos de atributos el identificado con el id first tomará un tamaño fijo y el identificador con el id second tomara un tamaño más grande relativo a su contenedor padre, veamos como se ve en el navegador.

HTML5_fuentes_avanz1.jpg

Estableciendo el estilo y el peso

El peso de la fuente corresponde al grosor de la línea que define la letra, esta se puede ir modificando con la propiedad font-weight, el estilo en cambio nos permite seleccionar entre texto normal, en itálicas o también en oblicuo, vamos a ver como utilizamos esto en un código para que pasemos directo a la práctica.

<!DOCTYPE HTML>
<html>
		 <head>
				 <title>Example</title>
				 <style>
							 p {
									 padding: 5px;
									 border: medium double black;
									 background-color: lightgrey;
									 margin: 2px;
									 float: left;
									 font-family: sans-serif;
									 font-size: medium;
							 }
									 #first {
											 font-weight: bold;
											 }
									 #second {
											 font-style: italic;
											 }
				 </style>
		 </head>
<body>
		 <p>
				 There are lots of different kinds of fruit - there are over 500
				 varieties of <span id="first">banana</span> alone. By the time we add the
				 countless types of <span id="second">apples, oranges, and other
				 well-known fruit, we are faced with thousands of choices</span>.
		 </p>
</body>
</html>

Ahora veamos como queda esto en nuestro navegador.

HTML5_fuentes_avanz2.jpg

En el código lo que hicimos fue colocar una sección en itálicas y otra en bold o negrillas, existe una diferencia entre itálicas y oblicuas, sin embargo a nivel visual es algo que de momento es despreciable, igualmente podemos dejar esa diferencia para que la investiguen y así el contenido de este tutorial lo tengan más fresco en la mente.

¿Te ayudó este Tutorial?


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!

X