HTML Lettertypen

Lettertypen ook wel genoemd fonts, spelen een zeer belangrijke rol in het maken van een website. Zo kan je het <font> element gebruiken om stijl, grootte en kleur toe te voegen aan de tekst op je website. Je kunt ook het <basefont> element gebruiken om al je tekst in te stellen op dezelfde grootte, stijl en kleur. Lettertype en kleur zijn volledig afhankelijk van de browser die wordt gebruikt om je pagina te bekijken.

Het <font> en <basefont> elementen zijn verouderd en worden niet ondersteund in toekomstige versies van HTML, er wordt sterk aangeraden om CSS te gebruiken om je fonts te bewerken. Om HTML te leren en te begrijpen zullen we echter in dit hoofdstuk de font en basefont elementen gewoon op de oude manier behandelen.


Het font element

Zoals hierboven beschreven bepaalt dit element het lettertype, de kleur en de grootte van omsloten tekst. Je kunt het font element aanpassen door gebruik te maken van drie attributen genaamd: size, color, en face.

AttribuutSize attribuut

Met het size attribuut kan de grootte van de tekst bepaald worden. De waarde kan een getal zijn van 1 t/m 7, of een getal gecombineerd met een plus- en min- teken. Voor het getal betekent een relatieve groottewijziging ten opzichte van de actuele grootte.

VoorbeeldVoorbeeld:
<font size="1">Font size="1"</font><br />
<font size="2">Font size="2"</font><br />
<font size="3">Font size="3"</font><br />
<font size="4">Font size="4"</font><br />
<font size="5">Font size="5"</font><br />
<font size="6">Font size="6"</font><br />
<font size="7">Font size="7"</font><br />
Uitproberen CSS


AttribuutColor attribuut

Je kunt van elke tekst de kleur bepalen met behulp van het color attribuut. Dit doe je door de kleurnaam of de hexadecimale code op te geven. Zie kleuren in het menu voor de kleurnamen en hexadecimale coderingen.

VoorbeeldVoorbeeld:
<font color="#FFBB00">Deze tekst wordt weergegeven in oranje.</font><br />
<font color="red">Deze tekst wordt weergegeven in rood.</font>
Uitproberen CSS


AttribuutFace attribuut

Het face attribuut, bepaalt het lettertype dat gebruikt wordt voor de tekst. Je kunt een lijst met namen opgeven. Als het eerste lettertype beschikbaar is op het systeem van de gebruiker, wordt het gebruikt, anders gaat de browser de lijst af. Als geen van de opgegeven lettertypen is geïnstalleerd op het systeem van de gebruiker, wordt het standaard lettertype van de browser gebruikt.

VoorbeeldVoorbeeld:
<font face="Times New Roman" size="5">Times New Roman</font><br />
<font face="Verdana" size="5">Verdana</font><br />
<font face="Comic sans MS" size="5">Comic Sans MS</font><br />
<font face="WildWest" size="5">WildWest</font><br />
<font face="Bedrock" size="5">Bedrock</font>
Uitproberen CSS

Klik om een lijst met HTML-standaard lettertypen te openen.open

Tip Het font element en zijn attributen zijn verouderd en worden niet ondersteund in HTML5, er wordt aangeraden om hiervoor CSS te gebruiken. CSS biedt meer mogelijkheden voor tekst en opmaak.


Het basefont element

Het basefont element wordt gebruikt om de standaard lettertype, kleur en grootte voor een document vast te leggen. Je kunt het font element gebruiken om de basefont instellingen te overschrijven. In het basefont element kan je de volgende attributen opnemen: size, color en face.

VoorbeeldVoorbeeld:
<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">
<p>Dit is de standaard lettertype.</p>

<h2>Voorbeeld van het <basefont> element</h2>
<p><font size="+2" color="darkgray">
Deze tekst is donkergrijs en 2 maten groter</font></p>

<p><font face="Comic sans MS" size="-1" color="#000000">
Dit is een Comic sans MS lettertype, een maat kleiner en zwart van kleur.
</font></p>
Uitproberen CSS

Tip Het basefont element is verouderd en wordt niet ondersteund in HTML5, er wordt aangeraden om hiervoor CSS te gebruiken. CSS biedt meer mogelijkheden voor tekst en opmaak.


Ad blocker gedetecteerd!
  Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.