Naam:  Wachtwoord:        Wachtwoord? Naam?   |   Register
Home CSS Lettertypen in CSS

Lettertypen in CSS

PDF Afdrukken E-mail
Webdesign - CSS

Lettertypen in CSS

Het uiterlijk van een document is enorm te beïnvloeden door het soort lettertype dat wordt gebruikt. Op uw eigen computer heeft u waarschijnlijk meer dan vijftig fonts waaruit u een keuze kunt maken. Is het document voor privé gebruik dan kunt u ieder lettertype kiezen dat op uw computer voorkomt.

Problematischer wordt het als u documenten wilt uitwisselen met anderen. De meest gangbare lettertypen zoals Times New Roman, Arial of Courier worden door de meest computers wel ondersteund, maar dat is anders als u een font van het type Engrave Old Town gebruikt. Tien tegen één dat de meesten dit lettertype niet op hun computer hebben. De weergave van het document zal er op die computers dus heel anders uit komen te zien.
Bij het ontwerpen van web-pagina's kampen we met hetzelfde probleem. Dit is ook de voornaamste reden waarom u zoveel Arial en Times New Roman lettertypen op het web tegenkomt. Maar er zijn nog twee redenen waarom webdesigners geen andere lettertypen gebruiken. Ten eerste is dat omdat het in vroegere versies van HTML het niet mogelijk was om specifieke kenmerken van een font op te geven. Ten tweede maakte het ook niet veel uit omdat de browser uiteindelijk het object was dat bepaalde welk lettertype er zou worden gebruikt.

Cascading Style Sheets biedt voor dit probleem niet een honderd procent oplossing, maar reikt u wel een aantal mogelijkheden aan om nauwkeuriger te kunnen bepalen wat de specificaties van een bepaald lettertype zijn. Het blijft uiteindelijk wel de browser die bepaalt of een lettertype wordt getoond of niet.

CSS font properties
Alle font-properties (lettertype eigenschappen) en bijbehorende waarden (values) worden gedefinieerd in de declaratie (het gedeelte tussen de accolades) van de rule. Binnen Cascading Style Sheets onderscheiden we vijf verschillende font-properties: font-family, font-style, font-variant, font-weight en font-size.

Font-family
Veel lettertypen komen in verschillende varianten voor. Kijk maar eens in uw Font-directory onder Windows. Lettertypen kennen vaak varianten als Bold, Italic, Regular en Bold Italic. Dit neemt niet weg dat deze lettertypen tot één en dezelfde familie behoren. Arial en Times Roman zijn zo maar twee voorbeelden van families waarbinnen verschillende lettertypen aanwezig zijn. In CSS kunnen we naar zo'n familie verwijzen met de property: font-family. De eigenschap font-family kent een tweetal waarden: family-name en generic-family.
Bij family-name kunt u de naam opgeven van de family waartoe het lettertype behoort. Het is hier toegestaan dat u verschillende familie namen opgeeft. De browser zal in eerste instantie opzoek gaan naar het lettertype dat u als eerste heeft opgegeven, vindt de browser dit lettertype niet dan kijkt hij naar de tweede in de rij. Mocht het zo zijn dat het lettertype helemaal niet voorkomt dan kiest de browser het lettertype dat er het meest op lijkt. De volledige selector kan er als volgt uitzien.

BODY { font-family: Times, Arial, Helvetica }

Let u er hier bij op dat de verschillende familie's door een komma worden gescheiden. Gebruikt u een familie naam die uit meerdere woorden bestaat, dan zet u deze naam tussen dubbele aanhalingstekens.

BODY { font-family: "Bookman Old Style", Arial, }

Om te voorkomen dat er niets wordt weergegeven als er geen gedefinieerde lettertypen aanwezig zijn kunt u een generic-family opgeven. Toegestane waarden zijn hier: Serif, Sans-serif, Monospace, Cursive en Fantasy. Deze vijf waarden zijn geen lettertypen en daarom mag u ze ook niet tussen aanhalingstekens plaatsen.

cursus css




















Font-style
Er kunnen drie waarden worden gebruikt bij de property font-style te weten, normal, italic en oblique. In eerste instantie lijkt het of italic en oblique hetzelfde zijn, beide waarden zetten immers een letter cursief. Bij een Sans-serif lettertype ziet u dan ook geen verschil. Dit is anders als u een Serif lettertype, zoals bij voorbeeld Times.

H1 { font-style: italic }
H2 { font-style: oblique }

Font-variant
Een lettertype in small-caps zetten krijgt u met de eigenschap font-variant. In tegenstelling tot hetgeen u zou verwachten, is het lettertype met small-caps niet hetzelfde als een lettertype in klein-kapitalen. De letters zijn iets kleiner en anders van vorm.

H1 { font-variant: small-caps }

Font-weight
Met de eigenschap font-weight kunt u bepalen hoe vet een lettertype er moet komen uit te zien. Er zijn negen niveaus die u kunt gebruiken. De niveaus lopen van 100 tot 900, waarbij honderd de lichtste waarde is. De waarde 400 komt overeen met normal, terwijl 700 gelijk staat aan bold. Als u de verschillende waarde gebruikt zal het u opvallen dat niet alle lettertypen alle waarden ondersteunen. De lettertypen zullen er dan ook in de meeste gevallen hetzelfde uitzien. Met de waarden bolder en lighter kunt u aangeven dat een lettertype lichter of donkerder wordt aangegeven dan de ouder. Bijvoorbeeld

DIV { font-weight: normal }
H2 { font-weight: 600 }
STRONG { font-weight: bolder }

Als er nu een zin in 'strong' wordt gezet, wordt afhankelijk van de ouder bepaald welk niveau vet het krijgt. Wordt 'strong' gebruikt onder de division tag dan zal het gewicht 500 worden. Wordt strong gebruikt als kind van de ouder <H2>, dan zal het niveau 700 worden.

cursus css




















Font-size
De grootte van een lettertype kan worden aangegeven met de eigenschap font-size. Er kunnen vier verschillende waarden worden aangegeven bij deze eigenschap: absolute-size, relative-size, length en percentage.
Met de waarde absolute-size kunt u verschillende grootten aangeven. De mogelijkheden die u heeft zijn: xx-small, x-small, small, medium, large, x-large en xx-large. De verschillen tussen de opeenvolgende waarde is dat het lettertype 1,5 maal wordt vergroot.
H3 { font-size: x-small }
U kunt de grootte van de letter ook bepalen door er een relatieve waarde aan toe te kennen. In dat geval wordt er eerst gekeken naar de ouder. Met de relative-size heeft u twee mogelijkheden, larger en smaller. CSS gaat uit van de standaard waarde medium.

BODY { font-size: medium }
H1 {font-size: larger }
DIV { font-size: smaller }

Met de waarde length kunt u een grootte opgeven die absolute is. Toegestane waarden zijn onder meer punten (pt), millimeters (mm), centimeters (cm) en inches (in) en pixels (px).

H6 { font-size: 64pt }

De laatste mogelijkheid is dat u de grootte van de lettertypen aangeeft in percentages. Het percentage dat u gebruikt wordt gezien ten opzichte van de ouder. Stel u geeft aan dat een font 120% moet zijn en de ouder heeft een grote van 100 pixels dan wordt dat lettertype 120 pixels groot.

P.wedstrijd { font-size: 130% }

Percentages: ten opzichte van de grootte van de ouder
Om het u eenvoudiger te maken heeft CSS ook een property ontwikkeld waarmee u alle voorgaande eigenschappen in één handeling kunt opnemen in de declaratie. De uitkomst is uiteraard hetzelfde dan wanneer u alles afzonderlijk zou noteren. De naam van de property is font.

DIV { font: oblique bold normal 22pt/12 pt times, arial, sans-serif }
Los geschreven ziet deze rule er zo uit:

DIV {
font-style: oblique
font-weight: bold
font-variant: normal
font-size: 22pt
line-height: 24pt
font-family: times, arial, sans-serif
}

Als u bepaalde waarden niet opgeeft, wordt de default-waarde geselecteerd door de browser. Tenslotte bespreken we in dit hoofdstuk nog even de twee properties die niet de eigenschappen van een lettertype bepalen maar wel het uiterlijk. We hebben het dan over de properties text-decoration en text-transform.

Text-decoration
Met text-decoration kunt u bepaalde stukken tekst onderstrepen, doorhalen of zelfs laten knipperen. Deze eigenschap kent vier waarden: underline, overline, line-through en blink. Met underline wordt een lijn aangebracht onder de tekst, terwijl met overline de lijn boven de tekst wordt gezet. Line-through betekent dat er een lijn door de tekst loopt en met blink kunt u een tekst laten knipperen.

cursus css




















Text-transform
De text-transform property heeft vier waarden: capitalize, uppercase, lowercase en none. Met capitalize zet u elke eerste letter van een woord in een zin kapitaal. Met uppercase zet u alle letters in een zin kapitaal terwijl u met lowercase het tegenovergestelde doet. Met 'none' kunt u een geërfd lettertype neutraliseren.

P { text-transform: uppercase }
DIV {text-transform: capitalize }

Deel dit bericht met anderen

Submit to Delicious Submit to Digg Submit to Facebook Submit to Google Bookmarks Submit to Stumbleupon Submit to Technorati Submit to Twitter Submit to LinkedIn

Commentaar (0)add comment


Schrijf commentaar

feedToon/Verberg commentaar formulier
kleiner | groter
password
 

busy
 

Lente Actie!

Omdat het lente is, vieren we feest! We geven daarom alleen in de lente 50 euro korting op alle basistrainingen van Avid Studio, Magix Video deluxe, Sony Vegas Movie Studio en Adobe Premiere Elements.

U betaalt dus geen 149 euro per trainingsdag, maar 99 euro. Schrijf je snel in, want er zijn maar een beperkt aantal plaatsen beschikbaar!

Cursussen en trainingen

Dvscene geeft trainingen en cursussen in het trainingscentrum van Iscenes multimedia.

Er zijn verschillende cursussen per pakket voor beginners en gevorderden.  U kunt zich inschrijven voor de volgende cursussen en trainingen:

 

 

 

Dvscene.nl is onderdeel van Iscenes multimedia specialist in videomontage-, cms- en cameratrainingen. Copyright © 2012. Dvscene.nl.