CSS-egenskapen font

I föregående lektion gick vi igenom många egenskaper för text. Det är ofta ganska besvärligt att skriva ut vart och ett av dessa egenskaper separat, så i CSS finns det för större bekvämlighet en speciell genvägsegenskap font. Denna egenskap gör det möjligt att samtidigt ställa in teckenstorlek, familj, fetstil, kursiv och radavstånd.

Den beskrivna egenskapen har följande syntax:

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

Ordningen på egenskaperna har betydelse, och obligatoriska är font-size och font-family. Var uppmärksam på att andra egenskaper, förutom de som beskrivits ovan i syntaxen, ingår inte i denna genvägsegenskap.

Låt oss titta på exempel.

Exempel

Låt oss säga att vi har följande stilar:

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

Låt oss skriva om dem med genvägsegenskapen:

p {
	font: 16px Arial;
}

Exempel

Låt oss säga att vi har följande stilar:

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

Låt oss skriva om dem med genvägsegenskapen:

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

Exempel

Låt oss säga att vi har följande stilar:

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

Låt oss skriva om dem med genvägsegenskapen:

p {
	font: bold 16px Arial;
}

Exempel

Låt oss säga att vi har följande stilar:

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

Låt oss skriva om dem med genvägsegenskapen:

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

Praktiska uppgifter

Förenkla koden genom att använda genvägsegenskapen font:

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

Förenkla koden genom att använda genvägsegenskapen font:

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

Förenkla koden genom att använda genvägsegenskapen font:

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