Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Saffier Verkaik
Na de kleur is het lettertype vermoedelijk de meest elementaire eigenschap van een pagina. Op deze pagina zal ik geen "trucjes" tonen, maar ik zal u de reeks van lettertype variaties tonen die CSS toestaat.
Omdat niet alle lettertypen verkrijgbaar zijn op alle computers (er zijn duizenden lettertypen en de meeste zijn niet gratis), verzorgt CSS een systeem van uitwijkmogelijkheden. U geeft het lettertype op dat u als eerste wilt, dan elk lettertype die het eerste type misschien zou kunnen vervangen indien het type niet beschikbaar is en u zou de lijst met een algemeen lettertype moeten beëindigen, waarvan er vijf zijn: schreef, zonder-schreef, monospace, cursief en fantasie.
De volgende tabel toont voorbeelden van verschillende lettertypen (uw browser zal ze misschien niet allemaal kennen) en u kunt zien wat uw browser met elk van de vijf algemene typen doet:
Lettertype | Uw browser | Voorbeeldplaatje |
---|---|---|
'sans-serif': normal fonts without serifs | ||
Arial, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Helvetica, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Verdana, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Trebuchet MS, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Gill Sans, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Noto Sans, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Avantgarde, TeX Gyre Adventor, URW Gothic L,
sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Optima, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Arial Narrow, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
'serif': normal fonts with serifs | ||
Times, Times New Roman, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Didot, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Georgia, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Palatino, URW Palladio L, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Bookman, URW Bookman L, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
New Century Schoolbook, TeX Gyre Schola, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
American Typewriter, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
'monospace': fixed-width fonts | ||
Andale Mono, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Courier New, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Courier, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | |
FreeMono, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | |
OCR A Std, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | |
DejaVu Sans Mono, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | |
monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | |
'cursive': fonts that emulate handwriting | ||
Comic Sans MS, Comic Sans, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Apple Chancery, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Bradley Hand, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Brush Script MT, Brush Script Std, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Snell Roundhand, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
URW Chancery L, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
'fantasy': decorative fonts, for titles, etc. | ||
Impact, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Luminari, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Chalkduster, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Jazz LET, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Blippo, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Stencil Std, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Marker Felt, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
Trattatello, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
De meeste lettertypen hebben verschillende stijlen binnen dezelfde groep, voornamelijk een vet gedrukte en een cursieve stijl, dikwijls ook een vette cursieve stijl, enigszins minder vaak een stijl van kleine hoofdletters en in enkele gevallen extra-lichte / extra-vette of uitgerekte / ingekrimpte versies.
De tabel hieronder toont een aantal verschillende stijlen. Tenzij u een hele rijke verzameling van lettertypen heeft, zullen velen van de rijen dezelfde zijn.
rule | serif | sans-serif |
---|---|---|
Styles | ||
font-style: normal
| The Quick… | The Quick… |
font-style: italic
| The Quick… | The Quick… |
font-style: oblique
| The Quick… | The Quick… |
Weights | ||
font-weight: 100
| The Quick… | The Quick… |
font-weight: 200
| The Quick… | The Quick… |
font-weight: 300
| The Quick… | The Quick… |
font-weight: normal
| The Quick… | The Quick… |
font-weight: 500
| The Quick… | The Quick… |
font-weight: 600
| The Quick… | The Quick… |
font-weight: bold
| The Quick… | The Quick… |
font-weight: 800
| The Quick… | The Quick… |
font-weight: 900
| The Quick… | The Quick… |
Variants | ||
font-variant: normal
| The Quick… | The Quick… |
font-variant: small-caps
| The Quick… | The Quick… |
Stretch | ||
font-stretch: ultra-condensed
| The Quick… | The Quick… |
font-stretch: extra-condensed
| The Quick… | The Quick… |
font-stretch: condensed
| The Quick… | The Quick… |
font-stretch: semi-condensed
| The Quick… | The Quick… |
font-stretch: normal
| The Quick… | The Quick… |
font-stretch: semi-expanded
| The Quick… | The Quick… |
font-stretch: expanded
| The Quick… | The Quick… |
font-stretch: extra-expanded
| The Quick… | The Quick… |
font-stretch: ultra-expanded
| The Quick… | The Quick… |
De "CSS Fonts Module" heeft nog meer eigenschappen om speciale stijlen te kiezen (in het geval van lettertypes met verscheidene varianten), in het bijzonder de eigenschap font-variant heeft veel meer waarden.