Typografisk design er et kritisk vigtigt stykke af et vellykket webstedsdesign. Oprettelse af websteder med tekst, der er let at læse, og som ser flot ud, er målet for enhver professionel webdesigner. For at opnå dette skal du være i stand til at indstille de specifikke skrifttyper, som du ønsker at bruge på dine websider. For at specificere skrifttypen eller skrifttypefamilien på dine webdokumenter bruger du egenskaben font-family style i din CSS.
Den mest ukomplicerede skrifttypefamiliestil, som du kunne bruge, ville kun omfatte en skrifttypefamilie:
p {
font-familie: Arial;
}
Hvis du anvendte denne stil på en side, vises alle afsnit i skrifttypefamilien "Arial". Dette er fantastisk, og da "Arial" er det, der kaldes en "websikker skrifttype", hvilket betyder mest (hvis ikke alle) computere ville have det installeret, kan du være let at vide, at din side vises i det tilsigtede skrifttype.
Så hvad sker der, hvis den skrifttype, du vælger, ikke kan findes? Hvis du f.eks. Ikke bruger en "websikker skrifttype" på en side, hvad gør brugeragenten, hvis de ikke har den skrifttype? De foretager en udskiftning.
Dette kan resultere i nogle morsomme sider. Jeg gik engang til en side, hvor min computer viste det helt i "Wingdings" (et ikon-sæt), fordi min computer ikke havde den skrifttype, som udvikleren havde angivet, og min browser foretog et dybtgående valg i, hvilken skrifttype den ville bruge som en udskiftning. Siden var helt uleselig for mig! Det er her, en skrifttypestak kommer i spil.
Separer flere skrifttypefamilier med et komma i en fontstak
En "font stack" er en liste over skrifttyper, som du vil have din side til at bruge. Du vil sætte dine skrifttypevalg i rækkefølge efter dine præferencer og adskille hver med et komma. Hvis browseren ikke har den første skrifttypefamilie på listen, prøver den den anden og derefter den tredje og så videre, indtil den finder en, den har på systemet.
font-familie: Pussycat, algerisk, Broadway;
I ovenstående eksempel vil browseren først kigge efter "Pussycat" skrifttypen, derefter "Algerian" og derefter "Broadway", hvis ingen af de andre skrifttyper blev fundet. Dette giver dig større chance for, at mindst en af dine valgte skrifttyper vil blive brugt. Det er ikke perfekt, hvorfor vi har endnu flere, vi kan tilføje til vores fontstak (læs videre!).
Brug generiske skrifttyper sidst
Så du kan oprette en skrifttypestak med en liste over skrifttyper og stadig ikke have nogen, som browseren kan finde. Du vil ikke have, at din side skal vises uleselig, hvis browseren foretager et dårligt erstatningsvalg. Heldigvis har CSS også en løsning på dette, og det hedder det generiske skrifttyper.
Du skal altid afslutte din skrifttypeliste (selvom det er en liste over en familie eller kun websikre skrifttyper) med en generisk skrifttype. Der er fem, du kan bruge:
- Kursiv
- Fantasi
- Monospace
- Sans serif
- Serif
De to ovenstående eksempler kan ændres til:
font-familie: Arial, sans-serif;
eller.
font-familie: Pussycat, algerisk, Broadway, fantasi;
Nogle navne på skrifttypefamilier er to eller flere ord
Hvis den skrifttypefamilie, du vil bruge, er mere end et ord, skal du omslutte det med dobbelt anførselstegn. Mens nogle browsere kan læse skrifttypefamilier uden anførselstegn, kan der være problemer, hvis det hvide område kondenseres eller ignoreres.
font-family: "Times New Roman", serif;
I dette eksempel kan du se, at skrifttypenavnet "Times New Roman", der er flere ord, er indkapslet med anførselstegn. Dette fortæller browseren, at alle disse tre ord er en del af det skrifttypenavn, i modsætning til tre forskellige skrifttyper, alle med et-ordsnavne.