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:
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.
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.
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.
