Den vanliga metoden för att definiera typsnitt ser ungefär ut på följande sätt:
body {
font-family: Arial, Helvetica, sans-serif;
}Här tilldelas body-elementet typsnittet Arial. Om detta inte finns på betraktarens system används istället Helvetica. Om även Helvetica saknas instrueras webbläsaren att åtminstone använda ett typsnitt utan serifer. Det kan naturligtvis inte kontrolleras på ett pålitligt sätt. Så ni har faktiskt ingen verklig kontroll över det slutgiltiga resultatet. Det ni har skapat så fint i GIMP eller Photoshop kan potentiellt gå förlorat i typsnurrdjungeln. Mer om hur detta problem kan lösas kommer senare.
Men först tillbaka till den klassiska metoden. Nedan hittar ni en typisk definition som anpassar webbplatsens grundläggande utseende. Genom body-definitionen kan ni först och främst specificera de grundläggande typsnittsinställningarna.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Självklart kan ni sedan skapa separat utformning för de olika elementen på sidan. Detta inkluderar till exempel rubriker, kursiv text osv. Men tänk i detta sammanhang återigen på nedarvningens princip inom CSS.
h1 {
font-size: 1.6em;
}Så skulle resultatet kunna se ut i webbläsaren:
Använda webbtypsnitt
Problemet med de konventionella typsnittsdefinitionerna är uppenbart: I slutändan kan ni inte vara helt säkra på att det typsnitt ni anger verkligen är tillgängligt för betraktaren. Om webbläsaren inte hittar typsnittet väljer den i stället ett som liknar det ni önskar. Ni har således inte verklig kontroll över resultatet. Vid den här punkten ger @font-face lösning på problemet. Genom detta kan man explicit ange ett typsnitt som ska användas. Det fungerar i princip på samma sätt som för bilder. Man måste alltså ange sökvägen till typsnittsfilen.
I moderna webbläsare används s.k. WOFF-webbtypsnitt för @font-face. Dessa typsnitt är betydligt mindre än de tidigare använda webbtypsnittsformaten EOT och TTF.
En typisk @font-face-definition ser ut så här:
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Namnet på det använda typsnittet anges vid font-family. Hittills finns det inga speciella syntaxegenskaper. Med src:url() anges URL:en där webbtypsnittsfilen finns. Om det teoretiskt sett finns möjlighet att typsnittet finns tillgängligt på användarnas datorer bör man också ange local. Följt av detta ska man ange namnet på typsnittet.
@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 webbtypsnitten användas som vanligt.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Här finns exempelvis webbtypsnitt
Naturligtvis dyker frågan upp var man kan få tag i dessa webbtypsnittsfilerna. Till exempel erbjuder Google många av dessa webbtypsnitt på sidan http://www.google.com/fonts.
Man kan lägga till dessa typsnitt direkt på den nämnda sidan.
En passande länk kan se ut så här:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
Under font-family anges det önskade webbtypsnittet. På den nämnda Google-sidan finner ni dessa namn och länkar. När webbtypsnittet har lagts till kan det användas som vilket annat typsnitt som helst.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Om ni vill kan ni använda flera webbtypsnitt på er sida. För detta klickar man på önskade webbtypsnitt på http://www.google.com/fonts och sedan på Lägg till i samling. När alla webbtypsnitt är i den egna samlingen öppnar man Användning längst ner på sidan. Där visas direkt en slags hastighetsmätare.
Med hjälp av denna bild kan man se effekterna av att inkludera webbtypsnitten på sidans laddningstid. Dessa effekter är faktiskt mätbara och ökar med varje ytterligare webbtypsnitt.
Hur enkelt det är att använda flera webfontar som man tidigare lagt till i sin samling visas i följande exempel:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
De enskilda webfontarna listas alltså efter varandra, åtskilda av en lodrät linje. Den fullständiga anropet som passar den valda samlingen visas på den redan nämnda Använd-sidan.
Många av webfontarna erbjuder s.k. delmängder som Latin eller Kyrilliska. För att inkludera dessa explicit anger man den önskade delmängden som parameter.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Om flera av dessa delmängder ska användas, anges de var för sig separerade av ett kommatecken.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Att använda denna webfont är dock inte omtvistat ur en helt annan synvinkel. Först och främst måste en anslutning till en Google-server etableras när sidan laddas. Detta kan undvikas genom att ladda ner webfont-filen och ladda upp den på sin egen server. Men var noga med att i varje fall följa villkoren för användning av de webfontar ni vill använda på det här sättet.
Skriftdefinitionen för exempelsidan
Nedan finns skriftdefinitionerna som jag kommer att använda för den aktuella exempelsidan:
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;
}
Naturligtvis kan ni inkludera ytterligare element. I det aktuella fallet är dock denna syntax tillräcklig.
