CSS font-egenskapen

I forrige leksjon gikk vi gjennom mange egenskaper for tekst. Det er ofte ganske tungvint å skrive hver av disse egenskapene separat, så for enklere bruk har CSS en spesialegenskap kalt font. Denne egenskapen lar deg samtidig sette fontstørrelse, familje, fethet, kursiv og linjeavstand.

Den beskrevne egenskapen har følgende syntaks:

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

Rekkefølgen av egenskapene har betydning, og obligatoriske er font-size og font-family. Vær oppmerksom på at andre egenskaper, bortsett fra de som er beskrevet over i syntaksen, ikke inngår i denne sammenslåtte egenskapen.

La oss se på noen eksempler.

Eksempel

Anta at vi har følgende stiler:

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

La oss omskrive dem ved hjelp av sammenslått egenskap:

p {
	font: 16px Arial;
}

Eksempel

Anta at vi har følgende stiler:

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

La oss omskrive dem ved hjelp av sammenslått egenskap:

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

Eksempel

Anta at vi har følgende stiler:

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

La oss omskrive dem ved hjelp av sammenslått egenskap:

p {
	font: bold 16px Arial;
}

Eksempel

Anta at vi har følgende stiler:

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

La oss omskrive dem ved hjelp av sammenslått egenskap:

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

Praktiske oppgaver

Forkort koden ved å bruke sammenslått egenskap font:

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

Forkort koden ved å bruke sammenslått egenskap font:

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

Forkort koden ved å bruke sammenslått egenskap font:

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