Navigatie

     Home
     Zoeken
     Contact
     Support Forum
     DLL Team
Nuttige Infomatie
on
Reglementen
on
DB downloads
on

Laatste Thema's

Nieuwste thema's
Blue_Fantasy Theme
Pinky Theme

Online Gebruikers

De lage landen mod/support site
Groet
Fusiontje
als nieuwste gebruiker

Totaal aantal leden: 3704

Super Administrators: 3
Administrators: 4
Leden: 3697

Leden online:

~PD1EVL 70 weken >
~gbouck 80 weken >
@MvE Designs114 weken >
@Yoda114 weken >
~chack 124 weken >

Gasten online: 1
Uw IP is: 207.241.229.30

Forum Categorieën 52
Forum Onderwerpen 1466
Forum Posts 7910
Commentaren 484
Gastenboek 178966

Tijdzones

Fusion België Global

Server Status

Server details
Naam phpfusion.be
Poort 80
Software Apache
Protocol HTTP/1.0
Gateway CGI/1.1
Server statistieken
Uptime 239 days, 15:09
Load 0.93, 0.81, 0.78

Web Statistieken

Powered by MyPagerank.Net
SEO Stats powered by MyPagerank.Net
Googlebot last access powered by MyPagerank.Net
Valid XHTML 1.0 Transitional

Inloggen

Gebruikersnaam

Wachtwoord



Wachtwoord vergeten?
Vraag hier om een nieuw wachtwoord.

Online Radio

·Webradio

EHBO Kit

Shoutbox

U dient in te loggen om een bericht te plaatsen.

11.03.2014 21:29
Suc6

11.03.2014 15:25
Het gaat jullie goed. Dit jaar wordt de onze Smile

Ledenenquête

Zit u te wachten op een iPad van Apple?





U dient in te loggen om te stemmen.

Tekstopmaak in CSS

Leren omgaan met CSS Font attributen

Fonts en CSS

De [FONT] tag wordt reeds lang geweerd uit HTML pagina's. Het is een overblijfsel uit lang vervlogen HTML 3.0 tijden. Daarom is het een goed idee om je te bekwamen in het gebruik van 'font-color', 'font-size' en 'font-family' via CSS. Met CSS werken geeft namelijk een veel grotere manipulatie mogelijkheid aan [FONT] dan in gewone HTML ooit mogelijk was.

De 3 basis ' properties' van FONT zijn:

  • font-color:
    Dit is de kleur van het lettertype getoond op het beeldscherm
  • font-size:
    Dit is hoe groot (of hoe klein) het lettertype op het beeldscherm verschijnt
  • font-family
    Het eigenlijke lettertype dat we willen gaan gebruiken


Font-Color

Om de tekstkleur in CSS te wijzigen volstaat het de kleurnaam of de hexadecimale codes op te geven. Gebruik ook het liefst één van de kleuren uit het 'websafe' kleurenpalet. Gebruik bijvoorbeeld:

    .mijnkleur {

    font-color: #ff0000;

    }

dat geeft rood


Font-size

Er zijn verschillende manieren om font-size te definiëren. Het is vrij simpel: exacte afmetingen gebruiken we enkel voor afdrukken naar de printer. Elke gebruiker ziet Uw webpagina anders (verschillende schermresolutie, monitor afmetingen, MAC of PC gebruiker, of zelfs gewoon al de standaard letterinstelling van de gebruiker kan een ander resultaat geven). Gebruik voor wegpagina's enkel relatieve verwijzingen. Het gebruik van pixels, centimeters of inches kan voor onaangename verassingen zorgen wanneer U het eindresultaat ziet op het beeldscherm van de eindgebruiker.

Onze aanbeveling: gebruik altijd ems. Ems houdt Uw pagina's toegankelijk. Om het even wie ze bekijkt.

Probeer dit even:

    .mijntypo1 {

    font-size: .85em;

    }


    .mijntypo2 {

    font-size: 1em;

    }


    .mijntypo3 {

    font-size: 1.25em;

    }

Dat geeft respectievelijk:

dit is lettergrootte 0.85em

dit is lettergrootte 1em

dit is lettergrootte 1.25em


Font-family

Dit is het eigenlijke lettertype dat U gaat gebruiken. Hoewel het U vrijstaat om het even welk lettertype te kiezen, toch graag nog even deze opmerking: als de gebruiker het lettertype dat U hebt gespecifieerd niet op zijn machine heeft geïnstalleerd zal de browser proberen een gelijkwaardig lettertype te vinden dat in overeenstemming is met hetgeen door U werd opgegeven. De pagina zal er dus ook weer niet meer uitzien zoals oorspronkelijk de bedoeling was!

Om dat probleem het hoofd te bieden, kunt U een specifieke lijst met lettertypes opgeven, gescheiden door comma's, dat op een breed spectrum van machines werkt. De volgorde waarin de lijst van lettertypes voorkomt, bepaalt hoe de gebruiker Uw pagina ziet. Arial dat bv. een standaard lettertype is op een PC, is geen standaard lettertype op MAC. Het is dus aangewezen voor genoeg varianten te zorgen.

Een goede all-round keuze voor de definitie van font-family is:

    .mijnfont {

    font-family: arial, geneva, helvetica, helv, sans-serif;

    }

Deze set is een sans-serif collectie. Geneva en arial zien er dan niet echt gelijkwaardig uit, ze zijn beide relatief standaard aanwezige lettertypes zowel op een Macintosh als een Windows computer. Helvetica en helv zijn dan weer gebruikelijk bij andere operating systems zoals Unix of Linux, die over een minder robuust arsenaal van lettertypes beschikken.

    deze font is sans-serif

    deze font is serif

Welke font-size kiezen?

Er zijn verschillende waarden mogelijk, afhankelijk van het doel dat u voor ogen hebt: webpagina's of afdrukken op de printer

Relatieve lengtewaarden (browser)

  • xx-small tot xx-large - relatieve waarden t.o.v. de default browser lettergrootte
  • percentage - relatief t.o.v. de omringende tekst
  • em and ex - relatief t.o.v. het parent element
  • pixels - relatief t.o.v. de schermresolutie

Absolute lengtewaarden (printer)

  • points en picas - printerwaarden
  • inches, centimeters, en millimeters - lengtewaarden

Points voor printen

Veel Web designers hebben de slechte gewoonte aangenomen om de monitor fonts in punten (Pt) uit te drukken. Punten zijn voor printers, punt uit! Als U 14pt lettertype gebruikt, kan dat er veel groter uitzien dan U verwacht. Het grootste verschil merkt U bij Macintosh en Windows. Macintosh toont een pagina +/- 25% kleiner dan in de Windows versie.

Web designers moeten absoluut blijven pt maten gebruiken, maar dan enkel als dat bestemd is voor style sheets die ontwikkeld zijn voor het afdrukken van documenten op de printer.

Wat nu?

Ok, we weten waarvoor we de style sheet gaan gebruiken. Nu moeten we nog beslissen welke maateenheid we effectief gaan gebruiken.

2 vuistregels:

  • Toegankelijkheid (Accessibility)
  • Als toegankelijkheid Uw grootste bekommernis is, moet U resoluut kiezen voor ems. Voor de meeste webpagina's is het body element relatief t.o.v. de standaard grootte van het browser venster.

    Het gebruik van ems als maateenheid verzekert U er van dat Uw pagina's toegankelijk zijn voor de meeste browsers en de meeste platforms. Plus, als Uw publiek de grootte van hun default lettertype in de browser wijzigen, verandert de schaal van het gekozen lettertype automatisch mee.

    Nadeel van ems: U verliest de controle over de exacte look van Uw pagina's. Sommige gebruikers kunnen een veel grotere of kleinere default setting hebben dan hetgeen U voor ogen hield. Ems kan in dat geval tot vreemde resultaten leiden.

  • Controle
  • Als controle over de look en feel van Uw webpagina Uw belangrijkste drijfveer is, moet U kiezen voor het gebruik van pixels. Pixels zijn de standaard eenheid voor schermen en monitors. De fonts zullen meer neigen naar de precieze afmetingen van het scherm zoals U dat wil benaderen.

    Pas op: pixels zijn de maateinheid van resolutie. Windows machines hebben standaard een 96 dpi schermresolutie, Macintosh machines meestal 72 dpi. Sommige Operating sytems (meestal Linux en Unix) hebben het er moeilijk mee een ingebed lettertype te (re)sizen. Soms zien deze lettertypes er dan gekarteld uit of worden moeilijk te lezen

Naar top

Verwerkingstijd: 0.26 seconden
14,187,479 unieke bezoeken