Valor CSS de la fuente explicado en 4 demostraciones trucos CSS
yo hice el mio El advenimiento de los componentes de la interfaz de usuario, y me encontré from-font
valor por text-decoration-thickness
Propiedad CSS. Tenía curiosidad acerca de esto, así que investigué un poco y creo que lo que encontré (y aprendí) es interesante y vale la pena compartirlo.
Para from-font
valor
así es como MDN define from-font
valor:
Si el archivo de fuente incluye información de grosor preferido, use este valor. Si el archivo de fuentes no incluye esta información, actúe como si
auto
fue configurado por el navegador seleccionando el grosor apropiado.
De modo que from-font
El valor se usa solo si el archivo de fuente tiene la definición de grosor de línea. De lo contrario, los navegadores utilizan auto
un valor que le dice al navegador que seleccione el grosor. Quería saber cómo funciona esto, así que hice algunas demostraciones comparándolo con otros valores.
Demostración 1: text-decoration-thickness: auto
En la primera demostración quería ver cómo auto
el valor de grosor funciona con líneas debajo, arriba y fuentes predeterminadas para la familia.
No encontré nada particularmente interesante aquí, excepto que algunas combinaciones no funcionan muy bien para el texto tachado (si me preguntas). Por ejemplo, el uso de decoración ondulada con tachado no es legible, pero supongo que este puede ser el resultado deseado en algunos escenarios.
Demostración 2: text-decoration-thickness: 0px
En la segunda demostración, quería ver cómo funciona el texto delgado.
Las líneas funcionan con párrafos o texto más pequeño, pero una línea discontinua delgada no funciona muy bien con texto grande porque la línea discontinua es difícil de encontrar.
También aprendí que no puedes establecer el grosor de la línea a continuación. 1px
En la demostración, el grosor de la línea se establece en 0px
, pero el navegador muestra un 1px
línea sin embargo.
demostración 3: text-decoration-thickness: from-font and font-weight
Entonces queria ver si text-decoration-thickness: from-font
la declaración cambia con el peso de la fuente. El valor de la izquierda se establece en from-font
; a la derecha, el valor se establece en auto.
EN from-font
el valor no parece seguir los cambios en el peso de la fuente del texto, al menos no cuando Roboto es la familia de fuentes. No importa cuán grande o negrita sea el texto. El grosor de la línea es el mismo si el valor se establece en from-font
.
Vale la pena señalar que Firefox muestra el mismo grosor de línea para ambos valores, así que supongo que Firefox en realidad usa from-font
valor por auto
valor.
demostración 4: text-decoration-thickness: from-font
y font-family
En esta última demostración, quería ver cómo from-font
value funciona con diferentes familias de fuentes. No afecta a los párrafos ni a los tamaños de fuente más pequeños porque muestra el valor más pequeño, 1px
La diferencia es visible para tamaños de fuente más grandes, como predeterminado <h1>
elementos, pero sólo si miras con mucho cuidado. Además, la línea discontinua es nuevamente demasiado delgada para un texto más grande. Esto es algo que los diseñadores y desarrolladores de fuentes pueden tener en cuenta al diseñar y definir fuentes.
Compatibilidad con navegador
Ciertamente puedes usar text-decoration-thickness
property hoy en día, ya que la mayoría de los navegadores modernos admiten esta propiedad.
Entonces, ¿deberías usarlo?
a pesar de que from-font
el valor puede Parece como una buena idea, no creo que deba ser utilizado todavía. Hay demasiadas inconsistencias con el estándar. text-decoration-thickness
valor en los navegadores (que Shime Vidas ha analizado en gran profundidad), por lo que no sorprende que from-font
el valor todavía no funciona tan bien. Quizás from-font
el valor debe definirse en porcentajes o alguna otra unidad relativa para que varíe con el tamaño de la fuente. Tal vez los diseñadores de fuentes no crean que debería funcionar de esa manera. De cualquier manera, parece que se necesita más discusión para determinar el valor de la propiedad de comportamiento predeterminado y cómo se refleja.
yo suelo from-font
valor de mi sitio personal para enlaces destacados en los artículos, y creo que funciona muy bien. La línea está bien, pero aún comunica la interacción.
Espero ver más opciones para text-decoration-thickness
en el futuro.
Deja una respuesta