Cargando

Ir a contenido


 


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.


Escrito por el oct 16 2013 22:19 html5 fuentes html5 atributos fuentes html5


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.



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.



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 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 22:19
  •   Actualizado oct 17 2013 08:06
  •   Visitas 851
  •   Nivel
    Avanzado



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