De las propiedades CSS que podemos escribir en forma compacta (shorthand), probablemente font es la menos conocida y la menos utilizada. Esto se debe a que su notación en la forma compacta es un poco complicada y en muchos casos puede generar confusión. Además, muchas veces termina siendo más larga que escribir cada propiedad por separado.
Sin embargo, no debemos descartarla. A continuación vamos a ver como se utiliza la notación compacta para font y en que casos puede ser conveniente utilizarla.
Notación compacta de la propiedad font
Lo primero que notamos extraño de esta propiedad es que además de contener a font-size, font-weight, etc., también puede dar estilo a line-height. Veamos la sintaxis:
[font-style || font-variant || font-weight]? font-size[/line-height]? font-family |
Las tres primeras propiedades (font-style, font-variant, font-weight) son opcionales y se pueden escribir en cualquier orden, aunque se recomienda usarlas en el orden que se muestra arriba. Si estas propiedades son omitidas, no heredarán los estilos del elemento padre, sino que les será asignado el valor normal. Esto puede ser negativo en algunos casos, y es la razón por la que algunas personas recomiendan evitar la notación compacta de font.
Continuando con la sintaxis: luego se debe definir el valor de font-size que es obligatorio. A continuación line-height (precedido de /), de nuevo opcional, y por último font-family que también es obligatorio.
Cuando utilizar font
Normalmente utilizamos las propiedades CSS en su notación compacta para ahorrarnos algo de tiempo a la hora de escribir el código, para obtener archivos de menor tamaño y para poder realizar cambios más facilmente.
Pareciera que estas condiciones son difíciles de cumplir en el caso de la propiedad font, pues su sintaxis no nos invita a utilizarla con frecuencia:
- Siempre debemos definir font-family, cuando lo normal es definir esta propiedad tan solo una o dos veces por sitio.
- Las propiedades opcionales no se heredan.
- Las personas que no están familiarizadas con la propiedad se pueden confundir al encontrar que font afecta a line-height.
Creo que lo mas determinante es el tema de font-family. Normalmente su valor es bastante largo, pues se compone de unas tres tipografías diferentes. Si no vamos a definir la tipografía para un selector, entonces no vale la pena usar font en su forma compacta.
Mi recomendación es utilizar font únicamente para definir estilos generales del sitio. En estos casos no tendremos problemas de herencia y nos ahorraremos algo de tiempo y espacio. Para estilos mas específicos, es conveniente definir cada propiedad por separado.
font-style> || <font-variant> || <font-weight