Font-eienskap afkorting in CSS

In die vorige les het ons baie eienskappe vir teks behandel. Dit is dikwels taamlik omslagtig om elkeen van hierdie eienskappe afsonderlik voor te skryf, daarom bestaan daar in CSS vir groter gerief 'n spesiale eienskap-afkorting font. Hierdie eienskap laat jou toe om gelyktydig die fontgrootte, familie, vetheid, kursief en lynhoogte in te stel.

Die beskryfde eienskap het die volgende sintaks:

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

Die volgorde van die eienskappe is belangrik, en verpligtend is font-size en font-family. Let daarop dat ander eienskappe, behalwe dié wat hierbo in die sintaks beskryf word, nie deel uitmaak van hierdie eienskap-afkorting nie.

Kom ons kyk na voorbeelde.

Voorbeeld

Gestel ons het die volgende style:

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

Kom ons herskryf dit deur die eienskap-afkorting:

p {
	font: 16px Arial;
}

Voorbeeld

Gestel ons het die volgende style:

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

Kom ons herskryf dit deur die eienskap-afkorting:

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

Voorbeeld

Gestel ons het die volgende style:

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

Kom ons herskryf dit deur die eienskap-afkorting:

p {
	font: bold 16px Arial;
}

Voorbeeld

Gestel ons het die volgende style:

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

Kom ons herskryf dit deur die eienskap-afkorting:

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

Praktiese take

Verkort die kode deur die eienskap-afkorting font te gebruik:

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

Verkort die kode deur die eienskap-afkorting font te gebruik:

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

Verkort die kode deur die eienskap-afkorting font te gebruik:

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