Typografisk design er en kritisk viktig del av et vellykket nettsteddesign. Å lage nettsteder med tekst som er lett å lese og som ser bra ut er målet for enhver profesjonell webdesigner. For å oppnå dette, må du kunne angi de spesifikke skriftene du vil bruke på websidene dine. For å spesifisere skrift- eller skriftfamilien på nettdokumentene dine, bruker du egenskapen font-family style i din CSS.
Den mest ukompliserte skriftfamiliestilen du kan bruke, vil bare inneholde én skriftfamilie:
p {
font-familie: Arial;
}
Hvis du brukte denne stilen på en side, vil alle avsnittene vises i "Arial" fontfamilien. Dette er flott, og siden "Arial" er det som er kjent som en "websikker font", som betyr mest (om ikke alt) datamaskiner vil ha det installert, kan du være lett å vite at siden din vises i det tiltenkte font.
Så hva skjer hvis skriften du velger ikke blir funnet? Hvis du for eksempel ikke bruker en "websikker font" på en side, hva gjør brukeragenten hvis de ikke har den fonten? De gjør et bytte.
Dette kan resultere i noen morsomme sider. Jeg gikk en gang til en side der datamaskinen min viste den helt i "Wingdings" (et ikon-sett) fordi datamaskinen min ikke hadde skriften som utvikleren hadde spesifisert, og nettleseren min tok et avskyelig valg i hvilken skrift den skulle bruke som en erstatning. Siden var helt uleselig for meg! Det er her en skriftstabel spiller inn.
Separer flere fontfamilier med komma i en fontstabel
En "font stack" er en liste over skriftene du vil at siden din skal bruke. Du vil sette skriftvalgene dine etter din preferanse og skille hvert med komma. Hvis nettleseren ikke har den første skriftfamilien på listen, vil den prøve den andre og deretter den tredje og så videre til den finner en den har på systemet.
font-familie: Pussycat, algerisk, Broadway;
I eksemplet ovenfor vil nettleseren først lete etter fonten "Pussycat", deretter "Algerian" og deretter "Broadway" hvis ingen av de andre fontene ble funnet. Dette gir deg større sjanse for at minst en av dine valgte skrifter blir brukt. Det er ikke perfekt, og det er grunnen til at vi har enda mer vi kan legge til fontstakken vår (les videre!).
Bruk generiske skrifttyper sist
Så du kan opprette en skriftstabel med en liste over skrifter og fremdeles ikke ha noen som nettleseren kan finne. Du vil ikke at siden din skal vises uleselig hvis nettleseren velger et dårlig alternativ. Heldigvis har CSS en løsning for dette også, og det heter det generiske skrifttyper.
Du bør alltid avslutte skriftlisten din (selv om det er en liste over en familie eller bare websikre skrifter) med en generell skrift. Det er fem du kan bruke:
- Kursiv
- Fantasi
- Monospace
- Sans serif
- Serif
De to eksemplene ovenfor kan endres til:
font-familie: Arial, sans-serif;
eller.
font-familie: Pussycat, algerisk, Broadway, fantasy;
Noen skriftfamilienavn er to eller flere ord
Hvis skriftfamilien du vil bruke er mer enn ett ord, bør du omgi det med dobbelt anførselstegn. Mens noen nettlesere kan lese skrifttypefamilier uten anførselstegn, kan det være problemer hvis det store rommet blir kondensert eller ignorert.
font-family: "Times New Roman", serif;
I dette eksemplet kan du se at skriftnavnet "Times New Roman", som er flere ord, er omsluttet av anførselstegn. Dette forteller nettleseren at alle disse tre ordene er en del av det skriftnavnet, i motsetning til tre forskjellige skrifter, alle med ett-ordsnavn.