Tamaño de fuente en CSS con barra inclinada

133

¿Qué significa la barra oblicua aquí:

font: 100%/120%;

html css size

— Alex
fuente

font-sizeNo acepta la barra. La propiedad correcta es font.

— BoltClock

¿que tal esto? fondo: "rgba (0, 0, 0, 0) ninguno repite desplazamiento 0% 0% / auto padding-box border-box"

— jerinho.com

195

Esto realmente establece dos propiedades y es equivalente a:

font-size: 100%;
line-height: 120%;

Para citar la documentación oficial :

La sintaxis de esta propiedad se basa en una notación abreviada tipográfica tradicional para establecer múltiples propiedades relacionadas con las fuentes.

Como dijo David M en los comentarios, refleja la tradición tipográfica de especificar los tamaños de tipo de letra como " x pt en y pt" para denotar el tamaño del glifo en la altura de la línea.

Pero el ejemplo en su pregunta es realmente incorrecto y sería ignorado por el navegador: solo puede combinar estas dos propiedades en la fontnotación abreviada, y debe especificar al menos tanto el tamaño de fuente como la familia. font: 100%/120%;Por lo tanto, simplemente escribir no es suficiente; Sin embargo, puede agregar un apellido genérico para que sea válido, por ejemplo:

font: 100%/120% serif;

— Konrad Rudolph
fuente

Es para reflejar la antigua sintaxis de composición tipográfica, donde tendría una fuente establecida como, por ejemplo, "10pt en 12pt" o "10pt / 12pt".

— David M

De hecho, uso esto bastante. El diseñador con el que trabajo siempre se refiere al tamaño como, por ejemplo, "14 sobre 22". Lo puse por accidente un día y me sorprendió / contento cuando funcionó.

— Dylan Lukes

un resumen: ¿este formato tampoco requiere que se especifique la familia de fuentes? Mis navegadores están ignorando esta propiedad: fuente: 12px / 16px; pero aceptando esto: font: 12px / 16px sans-serif; Este comportamiento también se documenta aquí

— kumarharsh 01 de

@ Harsh Sí, una familia (junto con un tamaño) es mínimamente requerida para la fontpropiedad de taquigrafía como se puede ver en la definición oficial .

— Konrad Rudolph el

gracias por la aclaración. Quizás pueda actualizar la respuesta (o la pregunta) ya que es un poco engañoso ya que un lector casual puede suponer que solo una declaración SIZE / LINE_HEIGHT funcionaría.

— kumarharsh 01 de

Konrad obtuvo este, pero hay muchas propiedades abreviadas de CSS como esta que puedes usar para acortar tus hojas de estilo. Algunos de ellos se ven un poco crípticos si no los conoce.

— Bill el lagarto
fuente

Sin embargo, la mayoría de las shorthands abordan propiedades de estilo relacionadas (por ejemplo border-*) David ha dado una buena explicación en los comentarios a mi respuesta. En cuanto a las manos cortas siendo crípticas: ciertamente cierto, pero muy útil y bastante fácil de aprender.

— Konrad Rudolph el