-
También podemos usar CSS para cambiar el tamaño de nuestro texto.
-
Como te puedes dar cuenta, simplemente mirando los encabezados de esta página
-
comparados con los párrafos, el navegador ofrece
-
estilos predeterminados con diferentes tamaños para los distintos elementos.
-
Hay un tamaño de fuente para el cuerpo del texto,
-
y tamaños mayores para cada nivel de encabezado.
-
Aunque a veces queremos modificar esos tamaños.
-
Y podemos hacerlo mediante la propiedad "font-size" de CSS.
-
Por ejemplo:
-
¿Qué hacemos si queremos que todo el texto de nuestra página sea un poco más pequeño?
-
Bueno, vamos a la etiqueta de estilo,
-
y añadimos una regla de CSS para la etiqueta "".
-
Y luego dentro de esa etiqueta ponemos la propiedad "font-size".
-
Ahora, ¿cuál debería ser el tamaño para "font-size"?
-
¿Cómo medimos el tamaño de la fuente?
-
En realidad, ésta es una buena pregunta,
-
porque al menos tenemos 10 unidades diferentes
-
que CSS puede reconocer para "font-size".
-
Vamos a empezar con una unidad que ya hemos visto antes: pixeles.
-
Usamos pixeles para decidir qué tan grandes queremos que sean nuestras imágenes.
-
Y los seguiremos usando mucho en CSS.
-
Probemos con 11 pixeles.
-
Ah, todo se volvió más pequeño.
-
En realidad, hasta el encabezado se volvió más pequeño.
-
¿Por qué los encabezados se volvieron más pequeños también?
-
¿No deberían ser del tamaño que el navegador determinó antes para los encabezados?
-
No.
-
Porque el estilo predeterminado de los encabezados del navegador no está especificado con pixeles.
-
Está determinado usando una unidad diferente llamada "em".
-
Y esa es una unidad relativa
-
que hace que el tamaño de la fuente de los encabezados sea proporcional a la fuente del cuerpo del texto.
-
Déjenme explicar lo que quiero decir con esto.
-
Vamos a la regla de estilo de ""
-
y agregar la propiedad "font-size".
-
Esta vez, en lugar de pensar en pixeles, voy a pensar relativamente.
-
¿Qué tan grande queremos que sea "" comparado con el cuerpo del texto?
-
Tal vez, ¿al doble?
-
Para eso , escribimos "2em".
-
Lo que sucede ahora es que el navegador calcula
-
el tamaño en pixeles para la fuente.
-
El navegador sabe que el tamaño de la fuente del cuerpo del texto es de 11 pixeles.
-
Y le dijimos que "" debería ser el doble del tamaño,
-
así que ahora los encabezados en "" son de 22 pixeles.
-
Si cambiamos el tamaño de la fuente del cuerpo del texto a 12 pixeles,
-
entonces ¿de qué tamaño será ""?
-
Es correcto, 24 pixeles.
-
¿Qué pasa si cambiamos el tamaño de "" a 1.5em?
-
Ahora "" será 12 por 1.5,
-
que es 18 pixeles.
-
También podemos especificar el tamaño en pixeles para "" como lo hicimos en "",
-
y funciona de la misma manera.
-
Depende de lo que te parezca más fácil.
-
Y como lo mencioné antes, hay muchas unidades más que podríamos usar
-
además de pixeles y "em".
-
Éstas son sólo dos de las unidades más populares.
-
Pero si quieres saber más,
-
revisa la documentación de "font-size",
-
o busca otros tutoriales en Internet.
-
¡Es hora de que aproveches el "font-size"!
