CSS gebruiken om lettertypen op webpagina's te wijzigen
Stel het lettertype in voor specifieke woorden, alinea's of hele webpagina's
Met eenvoudige stijlopties kunt u het lettertype van een webpagina wijzigen met Cascading Style Sheets. Gebruik CSS om het lettertype van afzonderlijke woorden, specifieke zinnen, koppen, hele alinea's en zelfs hele pagina's met tekst in te stellen.
De onderstaande schermafbeeldingen zijn van toepassing op de JSFiddle.net-codespeeltuin, maar de concepten die worden beschreven, zijn waar, ongeacht waar uw code is geïmplementeerd.
Derek Abella / Lifewire
Het lettertype wijzigen met CSS
Maak de HTML en CSS-wijzigingen die hieronder worden uitgelegd met behulp van een HTML-editor of teksteditor.
-
Zoek de tekst waar u het lettertype wilt wijzigen. We gebruiken dit als voorbeeld:
|__+_| -
Omring de tekst met het SPAN-element:
|__+_| -
Voeg het kenmerk toe > naar de span-tag:
|__+_| -
Wijzig binnen het stijlkenmerk het lettertype met de font-familie stijl.
|__+_|
Jon Fisher
-
Sla de wijzigingen op om de effecten te zien.
Tips voor het gebruik van CSS om het lettertype te wijzigen
-
De beste aanpak is om altijd ten minste twee lettertypen in uw lettertype stapel (de lijst met lettertypen), zodat als de browser het eerste lettertype niet heeft, hij in plaats daarvan het tweede lettertype kan gebruiken.
Scheid meerdere lettertypekeuzes met een komma, zoals deze:
|__+_| -
Het hierboven geschetste voorbeeld maakt gebruik van inline-styling, maar de beste soort styling gebruikt een externe stylesheet om meer te wijzigen dan alleen dat ene element. Gebruik een klasse om de stijl op tekstblokken in te stellen.
|__+_|Deze tekst is in Arial
In dit voorbeeld ziet het CSS-bestand om de bovenstaande HTML op te maken er als volgt uit:
|__+_|
Jon Fisher
-
Sluit CSS-stijlen altijd af met een puntkomma (;). Het is niet vereist als er maar één stijl is, maar het is een goede gewoonte om te beginnen.