Opmerking: deze pagina heeft betrekking op het wijzigen van lettertype, -grootte en -kleur op een webpagina. Zie onze pagina over Microsoft Word voor meer informatie over het wijzigen van de lettertypekleur, -grootte of -soort in Word.

Dit document bevat instructies voor het wijzigen van een lettertype en de kleur op een webpagina. De juiste syntaxis om verder te gaan is om Cascading Style Sheets te gebruiken in combinatie met de klasse- of ID-selectors in plaats van een inline-stijlkenmerk of lettertypetag, die zijn verouderd. Hoewel het vermeldenswaard is dat deze twee methoden nog steeds werken met de meeste internetbrowsers.

Selecteer om verder te gaan de methode waarvan u wilt leren of lees elke sectie.

Als u van plan bent het lettertype en de kleur slechts één keer op een webpagina te wijzigen, moet u de kenmerken ervan in de elementtag wijzigen. Met behulp van het stijlkenmerk kunt u het lettertype en de kleur opgeven met de lettertypefamilie, de kleur en de tekengrootte met lettertype, zoals in het onderstaande voorbeeld.

Voorbeeldcode

Deze tekst heeft het lettertype Courier, is blauw en 20px.

Resultaat

Deze tekst heeft het lettertype Courier, is blauw en heeft een grootte van 20px.

CSS gebruiken voor een of meer pagina's

Aangepast lettertype voor één pagina

In het hoofdgedeelte van uw webpagina kunt u code invoegen tussen de tabbladen om het uiterlijk van uw tekst in verschillende elementen te wijzigen. Het volgende blauwe vak bevat voorbeeldcode die, eenmaal genoemd, uw lettertype naar Courier zou veranderen en rood zou kleuren. Zoals u kunt zien, hebben we de klassenaam gedefinieerd als 'aangepast'.

 .custom {font-family: Courier; kleur rood; font-size: 20px; } 

Eenmaal gedefinieerd, kan deze stijl worden toegepast op de meeste elementen van uw pagina door de klasse 'aangepast' eraan toe te wijzen. In het volgende vak worden twee regels code en de bijbehorende resultaten weergegeven.

Voorbeeld

Deze hele zin is rood en Courier

Alleen het woord TEST is rood en Courier.

Resultaat

Deze hele zin is rood en Courier.

Alleen het woord TEST is rood en Courier.

Aangepast lettertype voor veel pagina's

Het importeren van een extern CSS-bestand kan heel nuttig zijn, omdat het gebruikers in staat stelt regels voor meerdere pagina's tegelijkertijd te wijzigen. In de volgende sectie wordt een voorbeeld gegeven voor het maken van een standaard CSS-bestand dat het lettertype en de kleur voor de meeste elementen wijzigt. Dit bestand kan in meer dan één webpagina worden geladen, zelfs een hele site.

Als u een eenvoudige teksteditor gebruikt en de volgende tekst opslaat als een CSS-bestand, wordt deze voorbereid voor import.

 @charset "utf-8";
.courier {font-family: Courier; kleur: # 005CB9; } 

Nadat de vorige tekst in een .css-bestand is geplaatst (we hebben de naam basic.css genoemd ), kunt u ernaar verwijzen vanaf een andere pagina met een regel die lijkt op het volgende voorbeeld.

Tip: Gebruikers kunnen de kenmerken van elementen op een pagina wijzigen door de code in het geïmporteerde CSS-bestand te wijzigen.

Font tag-oplossing

Hoewel verouderd, kan de HTML-tag nog steeds worden gebruikt en kan deze nodig zijn om te worden gebruikt met sommige online services. Wanneer u de FONT-tag gebruikt, moet u het gezichtskenmerk opnemen, dat het lettertype beschrijft dat moet worden gebruikt. In het onderstaande voorbeeld gebruiken we het Courier-lettertype en de hexadecimale kleurcode # 005CB9, die donkerblauw is.

Voorbeeldcode

 Een speciaal voorbeeld van een lettertype. 

Resultaat