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:
Por último, si system-ui era parte de la confusión allí, esa es una de esas cosas del sistema.