Den normale måde at definere skrifttyper på ser omtrent sådan ud:
body {
font-family: Arial, Helvetica, sans-serif;
}Her tildeles skrifttypen Arial til body-elementet. Hvis den ikke er tilgængelig på brugerens system, vil den falde tilbage til Helvetica. Hvis heller ikke Helvetica er tilgængelig, vil browseren blive bedt om at bruge en sans-serif skrifttype. Det kan naturligvis ikke rigtig kontrolleres. Så i sidste ende har I ikke rigtig kontrol over slutresultatet. Det I så flot har designet i GIMP eller Photoshop, kan muligvis gå tabt i skrifttykkets jungle. Mere om, hvordan dette problem kan løses, kommer dog senere.
Men først tilbage til den klassiske metode. Nedenfor finder I en typisk definition, hvor det grundlæggende udseende af hjemmesiden tilpasses. Ved at definere body-elementet kan I først og fremmest fastsætte de grundlæggende skriftspecifikationer.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Naturligvis kan I nu også designe de enkelte elementer på siden individuelt. Dette inkluderer f.eks. overskrifter, kursiv tekst osv. Men husk i denne forbindelse igen på CSS's nedarvningsprincip.
h1 {
font-size: 1.6em;
}Resultatet kan se sådan ud i browseren:
Brug af webfonts
Problemet med de konventionelle skriftdefinitioner er indlysende: I sidste ende kan I ikke være sikre på, at skrifttypen, I har angivet, rent faktisk er tilgængelig for betragteren. Hvis browserne ikke kan finde skrifttypen, vil de typisk vælge en, der ligner den ønskede af jer. Så I har ikke egentlig kontrol over resultatet. Præcis på dette punkt træder @font-face til. For her kan I eksplicit angive en skrifttype, der skal bruges. Dette fungerer grundlæggende på samme måde som med billeder. I skal så angive stien til skrifttypen.
I moderne browsere bruges de såkaldte WOFF-webfonts til @font-face. Disse skrifttyper er betydeligt mindre end de tidligere anvendte webfont-formater EOT og TTF.
En typisk definition af @font-face ser sådan ud:
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
I font-family angiver man navnet på skrifttypen, der skal anvendes. Indtil videre er der således ikke nogle specielle syntaksregler. Via src:url() angives URL'en, hvor webfont-filen ligger. Hvis der teoretisk set er mulighed for, at skrifttypen er tilgængelig på brugernes computere, bør man også angive local. Til dette lokaliserer man navnet på skrifttypen.
@font-face {
font-family: "Bitstream Vera Serif Bold";
local: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Efter @font-face-definitionen kan webfontene så bruges helt normalt.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Her kan I finde webfontene f.eks.
Nu rejser spørgsmålet sig naturligvis: Hvor får man de relevante webfont-filer fra? For eksempel hoster Google et stort antal af disse webfonts på siden http://www.google.com/fonts.
Disse skrifttyper kan man direkte inkludere via den nævnte side.
En tilsvarende opfordring ser sådan ud:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
I font-family angives den ønskede webfont. På den nævnte Google-side finder I disse navne og opkald. Når webfonten er inkluderet, kan den derefter anvendes som enhver anden skrifttype.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Hvis I ønsker det, kan I også bruge flere webfonts på jeres side. Dertil klikker man på de ønskede webfonts på http://www.google.com/fonts under Add to Collection. Når alle webfonts er i ens samling, klikker man på Use i bunden af siden. Der vises direkte en slags hastighedsmåler.
Ved hjælp af dette billede kan man se konsekvenserne af at inkludere webfontene på sideindlæsningstiden. Disse konsekvenser er faktisk målbare og øges med hver ekstra webfont.
Hvor let det er at bruge flere webfonter, som man tidligere har tilføjet til sin samling, viser det følgende eksempel:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
De enkelte webfonter noteres således efter hinanden adskilt af en lodret streg. Den fulde opkald, der passer til den valgte samling, vises på den allerede nævnte Brugs- side.
Mange af webfonterne tilbyder såkaldte subsets som latin eller kyrillisk. For at inkludere disse eksplicit angiver man det ønskede subset som en parameterværdi.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Hvis flere af disse subsets skal bruges, noterer man dem hver især adskilt af komma.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Brugen af denne webfont er dog ikke ubestridt af en helt anden baggrund. Først og fremmest skal der oprettes forbindelse til en Google-server, når siden kaldes. Dette kan undgås ved at downloade webfont-filen og uploade den til ens egen server. Vær dog opmærksom på brugsbetingelserne for webfonterne, som I ønsker at bruge på denne måde.
Skriftdefinitionen af eksempelsiden
Nedenfor finder I skriftdefinitionerne, som jeg vil bruge til den aktuelle eksempelside:
body {
font-family: 'Crimson Text', Helvetica, sans-serif;
color: #444;
text-decoration: none;
line-height: 1.5em;
font-size: 1.2em;
}
p {
font-size: 1.1em;
}
h1 {
font-size: 1.6em;
color: #3399FF;
}
Naturligvis kan I tilføje ekstra elementer. I den nuværende sag er denne syntaks dog mere end tilstrækkelig.
