CSS

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. 1pxEn 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, 1pxLa 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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba