¿Qué significa `font: 110% / 1.4 system-ui`? | Programar Plus

Utilizo esta línea, o una similar, en muchas demostraciones rápidas. No es que no sea una línea de código digna de producción, solo tiendo a ser un poco más explícito en proyectos más grandes.

html {
  font: 110%/1.4 system-ui;
}

Alguien escribió confundido por eso, y pude ver cómo una línea como esa es un poco desconcertante al principio.

Lo primero que debe saber es que se llama taquigrafía. El font propiedad en CSS le da la oportunidad de establecer un montón de font-* propiedades todas a la vez. En este caso, estamos configurando:

html {
  font-family: system-ui;
  font-size: 110%;
  line-height: 1.4;
}

Hay algunas cosas más específicas que debe saber. Por ejemplo, el orden importa.

/* invalid */
html {
  font: system-ui 100%/1.4;
}

Tampoco puede configurar el line-height sin configurar también el font-size. Si vas a configurar line-height, tienes que configurar ambos. Tenga mucho cuidado allí porque algo como 20px es a la vez una l válidaine-height y font-size, y si solo establece uno, será el font-size. Si opta por un número sin unidades, lo cual es una gran idea para line-heighte intente configurarlo solo, simplemente fallará.

/* invalid */
html {
  font: 1.5 system-ui;
}

Por supuesto, tenemos todo esto detallado en la entrada del Almanaque para font. Pero también agradeceré a Mateusz Hadryś que tiene un artículo detallado titulado “Estilo de texto completo con una sola línea de CSS” con algunas cifras detalladas como esta que son útiles para comprender todo:

Mostrando la declaración de propiedad de la fuente.  El estilo, la variante y el peso están en amarillo con una etiqueta arriba que dice que el orden no importa y una etiqueta debajo que dice que deben ser los primeros.  El siguiente es el tamaño con una barra inclinada hacia adelante y luego la altura de la línea en rojo.  Encima de ellos hay una etiqueta que dice que deben estar uno al lado del otro.  La siguiente es la familia en azul claro con una etiqueta que dice que tiene que ser la última.  Hay una etiqueta blanca adicional que conecta el tamaño y la familia que dice que son obligatorios.

Por último, si system-ui era parte de la confusión allí, esa es una de esas cosas del sistema.

(Visited 22 times, 1 visits today)