Propiedad font-size-adjust
La propiedad font-size-adjust permite
controlar el tamaño de la fuente, sin cambiar
font-size
(aumentar o disminuir).
Aplicación: supongamos que en font-family
se definen dos fuentes separadas por coma, por ejemplo,
Georgia, "Times New Roman". Supongamos
que la computadora del usuario no tiene la fuente Georgia
- en este caso se aplicará "Times New Roman".
Sin embargo, nos enfrentamos a un problema: con el mismo
valor de font-size
las fuentes se verán diferentes. En el ejemplo
a continuación, a ambos párrafos se les asignó font-size
de 16px, pero diferentes font-family.
Observe cómo difieren los tamaños:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
Lorem ipsum dolor sit amet.
</p>
:
Esto ocurre porque el tamaño visual
de la fuente depende en mayor medida no
de la propiedad font-size,
que solo define el tamaño general de la fuente,
sino de la relación entre los valores de la propiedad font-size
y la magnitud x-height (x-height
- es la diferencia entre el tamaño de la letra minúscula
"x" y la letra mayúscula "X" para una fuente
específica).
Esta relación se llama aspecto de la fuente y se calcula mediante la fórmula: aspecto = font-size / x-height.
El problema de los tamaños lo resuelve la propiedad font-size-adjust
(permite cambiar el aspecto de la fuente), la cual
hará que la segunda fuente se vea del mismo
tamaño que la primera.
Hagamos que la fuente Times
New Roman sea del mismo tamaño
que Georgia. Conocemos el aspecto de Georgia
- es 0.5 (ver la tabla abajo).
Establezcamos font-size-adjust para el texto
con Times New Roman en el valor 0.5
y veremos que el segundo texto adquirió el mismo
tamaño que el primero:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet.
</p>
:
Sintaxis
selector {
font-size-adjust: número | none;
}
Valores
| Valor | Descripción |
|---|---|
number |
Un número define el aspecto de la fuente. |
none |
No hay ajuste del tamaño de fuente. |
Valor por defecto: none.
¿Cómo determinar el valor del aspecto para una fuente?
Vea el fragmento de la especificación W3C:
El factor de proporcionalidad (aspecto) para
las fuentes seleccionadas puede calcularse
comparando el mismo texto, pero con diferente
valor de font-size-adjust. Si el valor
de la propiedad se ajusta correctamente, entonces con el mismo tamaño
de fuente el texto permanecerá sin cambios para todas
las fuentes utilizadas en la página.
A continuación, muestro los valores de aspecto que conozco para
algunas fuentes: Georgia - 0.5,
Times New Roman - 0.46, Verdana -
0.58.
Ejemplo
Compare cómo se ve el texto con diferente valor
de font-size-adjust y el mismo font-size
y font-family:
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
:
Ejemplo . Aplicación en la vida real
El siguiente código hace que, en caso de que no esté
presente en la computadora del usuario la fuente Georgia,
la fuente que se aplique Times New Roman
tenga el mismo tamaño que Georgia:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>
p {
font-size: 16px;
font-family: Georgia, "Times New Roman";
font-size-adjust: 0.5;
}
:
