Den vanlige måten å definere skrifttyper på ser omtrent slik ut:
body {
font-family: Arial, Helvetica, sans-serif;
}Her blir skrifttypen Arial tildelt body-elementet. Hvis denne ikke er tilgjengelig på betrakterens system, vil den falle tilbake på Helvetica. Hvis Helvetica heller ikke er tilgjengelig, vil nettleseren bli bedt om å bruke en skrifttype uten serif. Dette kan selvfølgelig ikke virkelig kontrolleres. Så du har egentlig ikke full kontroll over sluttresultatet. Det du har designet så pent i GIMP eller Photoshop kan kanskje gå tapt i skriftjungelen. Mer om hvordan dette problemet kan løses, vil bli presentert senere.
Men først tilbake til den klassiske varianten. Nedenfor finner du en typisk definisjon som tilpasser det generelle utseendet på nettstedet. Med body-definisjonen kan du først og fremst angi de grunnleggende skriftattributtene.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Selvfølgelig kan du også tilpasse de enkelte elementene på siden separat. Dette inkluderer for eksempel overskrifter, kursiverte deler osv. Men igjen, husk arveprinsippet i CSS.
h1 {
font-size: 1.6em;
}Resultatet i nettleseren kan se slik ut:
Bruk webfonter
Problemet med de konvensjonelle skriftdefinisjonene er åpenbart: Til syvende og sist kan du ikke være helt sikker på om skrifttypen du har angitt faktisk er tilgjengelig for betrakteren. Nettleserne vil - hvis de ikke finner skrifttypen - i tvilstilfeller velge en som ligner på den du ønsker. Så du har egentlig ikke full kontroll over resultatet. Akkurat her kommer @font-face til unnsetning. For gjennom dette kan du uttrykkelig angi en skrifttype som skal brukes. Dette fungerer i prinsippet akkurat som med bilder. Du må angi banen til skriftfilen.
I moderne nettlesere brukes såkalte WOFF-webfonter for @font-face. Disse skrifttypene er betydelig mindre enn de tidligere brukte webfontformatene EOT og TTF.
En typisk @font-face-definisjon ser slik ut:
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Navnet på skrifttypen du vil bruke noteres i font-family. Så langt er det ingen spesielle syntaksvarianter. Gjennom src:url() blir URL-en angitt der webfontfilen ligger. Hvis det teoretisk sett er mulig at skrifttypen er tilgjengelig på brukernes datamaskiner, bør du i tillegg spesifisere local. Til dette local gir du 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");
}
Etter @font-face-definisjonen kan du deretter bruke webfonter på vanlig måte.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Her kan du for eksempel finne webfonter
Nå stiller det seg naturligvis spørsmålet om hvor man kan få tak i de aktuelle webfontfilene. Google for eksempel hoster mange av disse webfontene på siden http://www.google.com/fonts.
Disse skrifttypene kan integreres direkte via den nevnte siden.
En tilsvarende påkalling ville se slik ut:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
I font-family angis den ønskede webfonten. På den nevnte Google-siden finner du disse navnene og påkallingene. Når webfonten er integrert, kan den deretter brukes som hvilken som helst annen skrifttype.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Hvis du ønsker det, kan du også bruke flere webfonter på siden din. For å gjøre dette klikker du på http://www.google.com/fonts på de ønskede webfontene på Add to Collection. Når alle webfontene er i samlingen din, klikker du på "Use" i nedre del av siden. Der vises en slags turteller direkte.
Ut fra dette diagrammet kan du se virkningen av å integrere webfontene på sidens lastetid. Disse virkningene er faktisk målbare og øker med hver ekstra webfont.
Hvor enkelt det er å bruke flere webfonter som man tidligere har lagt til i samlingen sin, viser det følgende eksempelet:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
De enkelte webfontene blir derfor notert etter hverandre, delt med en loddrett strek. Den komplette koden som passer til den valgte samlingen, vises på bruker-siden som allerede er nevnt.
Mange av webfontene tilbyr såkalte subsets som latin eller kyrillisk. For å inkludere disse eksplisitt, angir man ønsket subset som en parameterverdi.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Hvis man ønsker å bruke flere av disse subsettene, noterer man dem hver for seg, delt med komma.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Bruken av disse webfontene er imidlertid ikke uten kontroverser av en helt annen grunn. Først og fremst må det opprettes en forbindelse til en Google-server når siden lastes inn. Dette kan unngås ved å laste ned webfont-filen og laste den opp på din egen server. Vær imidlertid oppmerksom på bruksvilkårene for webfontene du ønsker å bruke på denne måten.
Skriftdefinisjonen på eksempelsiden
Nedenfor finner du skriftdefinisjonene jeg vil bruke for den aktuelle eksempelsiden:
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;
}
Selvfølgelig kan du legge til ekstra elementer. Men i dette tilfellet er denne syntaksen mer enn tilstrekkelig.
