Typografisk design är en kritiskt viktig del av en framgångsrik webbdesign. Att skapa webbplatser med text som är lätt att läsa och som ser bra ut är målet för varje professionell webbdesign. För att uppnå detta måste du kunna ställa in de specifika teckensnitt som du vill använda på dina webbsidor. För att ange typsnitt eller teckensnittsfamilj i dina webbdokument använder du egenskapen font-family style i din CSS.
Den mest okomplicerade teckensnittsfamiljstilen som du kan använda skulle bara innehålla en teckensnittsfamilj:
p {
font-family: Arial;
}
Om du använde denna stil på en sida visas alla stycken i teckensnittsfamiljen "Arial". Det här är fantastiskt och eftersom "Arial" är det som kallas ett "webbsäkert typsnitt", vilket betyder de flesta (om inte alla) datorer skulle ha det installerat kan du vara lätt att veta att din sida kommer att visas i det avsedda font.
Så vad händer om det typsnitt du väljer inte kan hittas? Om du till exempel inte använder ett "webbsäkert teckensnitt" på en sida, vad gör användaragenten om de inte har det teckensnittet? De gör ett byte.
Detta kan resultera i några underhållande sidor. Jag gick en gång till en sida där min dator visade den helt i "Wingdings" (en ikonuppsättning) eftersom min dator inte hade teckensnittet som utvecklaren hade angett, och min webbläsare gjorde ett dystert val i vilket teckensnitt det skulle använda som ersättning. Sidan var helt oläslig för mig! Det är här en typsnittstapel spelar in.
Separera flera teckensnittsfamiljer med ett komma i en teckensnittsstapel
En "font stack" är en lista med teckensnitt som du vill att din sida ska använda. Du skulle placera dina teckensnittsval i önskad ordning och separera var och en med ett komma. Om webbläsaren inte har den första teckensnittsfamiljen i listan kommer den att prova den andra och sedan den tredje och så vidare tills den hittar en som den har på systemet.
font-family: Pussycat, algerisk, Broadway;
I exemplet ovan letar webbläsaren först efter "Pussycat" -teckensnittet, sedan "Algerian" och sedan "Broadway" om inget av de andra teckensnitten hittades. Detta ger dig större chans att minst ett av dina valda teckensnitt kommer att användas. Det är inte perfekt, varför vi har ännu mer vi kan lägga till i vår typsnittstack (läs vidare!).
Använd Generic Fonts Last
Så du kan skapa en teckensnittsstapel med en lista med teckensnitt och fortfarande inte ha någon som webbläsaren kan hitta. Du vill inte att din sida ska visas oläslig om webbläsaren gör ett dåligt alternativ. Lyckligtvis har CSS en lösning för detta också, och det heter generiska teckensnitt.
Du bör alltid avsluta din teckensnittslista (även om det är en lista med en familj eller endast webbsäkra teckensnitt) med ett generiskt teckensnitt. Det finns fem du kan använda:
- Kursiv
- Fantasi
- Monospace
- Sans serif
- Serif
De två ovanstående exemplen kan ändras till:
font-family: Arial, sans-serif;
eller.
font-family: Pussycat, Algerian, Broadway, fantasy;
Vissa teckensnittsnamn är två eller fler ord
Om teckensnittsfamiljen du vill använda är mer än ett ord, bör du omge det med dubbla citattecken. Medan vissa webbläsare kan läsa teckensnittsfamiljer utan citattecken, kan det vara problem om det vita utrymmet kondenseras eller ignoreras.
font-family: "Times New Roman", serif;
I det här exemplet kan du se att teckensnittsnamnet "Times New Roman", som består av flera ord, är inrymt i citattecken. Detta berättar för webbläsaren att alla dessa tre ord är en del av det teckensnittsnamnet, i motsats till tre olika teckensnitt, alla med ett ordnamn.