Propiedad font-size
La propiedad font-size establece el tamaño
de la fuente del texto. Los valores de la propiedad son
cualquier unidad
de medida (generalmente, son px, em
o rem) o palabras clave especiales
(usadas muy raramente).
Sintaxis
selector {
font-size: valor;
}
Valores como palabras clave
| Valor | Descripción |
|---|---|
xx-small |
El más, más pequeño. Ejemplo: Lorem ipsum dolor sit amet. |
x-small |
El más pequeño. Ejemplo: Lorem ipsum dolor sit amet. |
small |
Pequeño. Ejemplo: Lorem ipsum dolor sit amet. |
medium |
Mediano. Ejemplo: Lorem ipsum dolor sit amet. |
large |
Grande. Ejemplo: Lorem ipsum dolor sit amet. |
x-large |
Muy grande. Ejemplo: Lorem ipsum dolor sit amet. |
xx-large |
El más grande. Ejemplo: Lorem ipsum dolor sit amet. |
larger |
Mayor que la fuente del elemento padre por un valor determinado. |
smaller |
Menor que la fuente del elemento padre por un valor determinado. |
Valor por defecto: medium.
Ejemplo
Establezcamos el tamaño de fuente de los párrafos en
20px:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-size: 20px;
}
:
Ejemplo
En este ejemplo, para el párrafo se establece un tamaño
de 16px, y para el span dentro de él - 150%.
En este caso, el tamaño de fuente para el span será
150% de su elemento padre,
es decir, del párrafo, y su tamaño real será
16px * 150% = 24px
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: 150%;
}
:
Ejemplo
En este ejemplo, para el párrafo se establece un tamaño
de 16px, y para el span dentro de él - larger.
En este caso, el tamaño de fuente para el span será
mayor que el de su elemento padre (el párrafo):
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: larger;
}
:
Ejemplo
Preste atención a que las fuentes con diferente
font-family
y el mismo font-size visualmente pueden ser
de tamaños completamente diferentes (para resolver este
problema, consulte la propiedad font-size-adjust).
En el ejemplo siguiente, a ambos párrafos se les establece font-size
de 16px, pero diferentes font-family:
<p id="elem1">
Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
Lorem ipsum dolor sit amet.
</p>
#elem1 {
font-size: 16px;
font-family: Arial;
}
#elem2 {
font-size: 16px;
font-family: "Times New Roman";
}
:
