Beim Arbeiten mit Fonts ist es oft wichtig verschiedene Varianten einer Schriftart zu haben. Um Bandbreite zu sparen, werden bei den meisten Schriftarten die Versionen in einzelnen Dateien angeboten. Wie werden nun die einzelnen Varianten in CSS unter dem gleichen Schriftartennamen geladen?
Bei CSS3 wird unter anderem mit dem Befehl „@font-face“ eine Schriftart eingefügt.
@font-face {
font-family: meineSchriftart;
src: url(meineSchriftart-komplett.woff);
}Wobei „font-family“ den Namen der Schriftart bestimmt und „src“ den Ort der Schriftart beschreibt.
Wenn die Schriftartdatei alle benötigten Varianten enthält, reicht das schon komplett aus. Jedoch werden Schriftartvarianten gern einzeln angeboten um Bandbreite zu sparen.
In diesem Fall hilft uns die Anweisung „font-weight“
@font-face {
font-family: meineSchriftart;
src: url(meineSchriftart-normal.woff);
font-weight: normal;
}@font-face {
font-family: meineSchriftart;
src: url(meineSchriftart-bold.woff);
font-weight: bold;
}Beide Varianten werden separat eingebunden, jedoch mit gleichen Namen. „font-weight“ wird nun benutzt um die Varianten zu unterscheiden. Nun steht die Schriftart in „normal“ und „bold“ zur Verfügung.
