Propiedad abreviada font en CSS

En la lección anterior analizamos muchas propiedades para el texto. A menudo es bastante engorroso escribir cada una de estas propiedades por separado, por eso en CSS, para mayor comodidad, existe una propiedad abreviada especial font. Esta propiedad permite establecer simultáneamente el tamaño de la fuente, la familia, el grosor, la cursiva y el interlineado.

La propiedad descrita tiene la siguiente sintaxis:

font-style font-weight font-size / line-height font-family

Además, el orden de las propiedades es importante, y las obligatorias son font-size y font-family. Presta atención a que otras propiedades, aparte de las descritas anteriormente en la sintaxis, no están incluidas en esta propiedad abreviada.

Veamos algunos ejemplos.

Ejemplo

Supongamos que tenemos los siguientes estilos:

p {
	font-size: 16px;
	font-family: Arial;
}

Reescribámoslos usando la propiedad abreviada:

p {
	font: 16px Arial;
}

Ejemplo

Supongamos que tenemos los siguientes estilos:

p {
	font-size: 16px;
	font-family: Arial;
	line-height: 50px;
}

Reescribámoslos usando la propiedad abreviada:

p {
	font: 16px/50px Arial;
}

Ejemplo

Supongamos que tenemos los siguientes estilos:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
}

Reescribámoslos usando la propiedad abreviada:

p {
	font: bold 16px Arial;
}

Ejemplo

Supongamos que tenemos los siguientes estilos:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
	line-height: 50px;
	font-style: italic;
}

Reescribámoslos usando la propiedad abreviada:

p {
	font: bold italic 16px/50px Arial;
}

Tareas prácticas

Simplifica el código usando la propiedad abreviada font:

p {
	font-family: "Times New Roman";
	font-size: 13px;
	line-height: 20px;
}

Simplifica el código usando la propiedad abreviada font:

p {
	width: 300px;
	font-family: Arial;
	color: red;
	font-size: 40px;
	font-weight: bold;
}

Simplifica el código usando la propiedad abreviada font:

p {
	font-family: Arial;
	font-size: 40px;
	font-weight: bold;
	text-indent: 50px;
	font-style: italic;
	line-height: 60px;
}