Handboek Annuleren

CSS-kiezers

CSS-kiezers vertellen de browser waar de weblettertypen die je gebruikt, moeten worden toegepast en welke dikte en stijl van het lettertype voor de tekst moet worden gebruikt.

De namen van lettertypefamilies gebruiken in je CSS

Op de pagina Webprojecten worden de naam van de CSS-lettertypefamilie (font-family), de numerieke dikte en de lettertypestijl voor elk lettertype in het project weergegeven. Klik op de koppeling 'Project bewerken' om de CSS-gegevens voor elk project te bekijken.

image

Nadat je de insluitcode in je document hebt opgenomen, gebruikt deze namen van lettertypefamilies in de CSS om de lettertypen op de tekst toe te passen. Bijvoorbeeld:

h1 {
font-family: "brandon-grotesque", sans-serif;
}
h1 { font-family: "brandon-grotesque", sans-serif; }
h1 {
  font-family: "brandon-grotesque", sans-serif;
}

Alternatieve lettertypen opgeven

Als de browser van een gebruiker geen weblettertypen ondersteunt of als ze om de een of andere reden niet worden geladen, worden in plaats daarvan de alternatieve lettertypen in de CSS-stack gebruikt.

De lettertypestack moet ten minste één alternatief lettertype bevatten dat beschikbaar is op alle platforms (zoals Georgia of Arial), gevolgd door een algemene naam van de lettertypefamilie (zoals serif of sans-serif). Als de browser het eerste lettertype niet kan vinden, wordt het tweede lettertype geprobeerd enzovoort.

Meerdere dikten en stijlen gebruiken

Je kunt andere tekendikten (font-weight) dan 'normaal' en 'vet' opgeven door numerieke waarden voor tekendikte in de CSS te gebruiken. De numerieke waarden komen gewoonlijke overeen met deze dikten:

  • 100 = dun
  • 200 = extra licht
  • 300 = licht
  • 400 = normaal, romein
  • 500 = medium
  • 600 = half-vet
  • 700 = vet
  • 800 = dik
  • 900 = extra dik

Je vindt de numerieke waarden voor alle lettertypen in je project op de pagina Webprojecten.

image

Gebruik bijvoorbeeld deze CSS als je de dikte 700 van een lettertype wilt toepassen op het element h1:

h1 {
font-weight: 700;
}
h1 { font-weight: 700; }
h1 {
  font-weight: 700;
}

Variantspecifieke namen gebruiken in Internet Explorer 8

Internet Explorer 8 laadt maximaal vier dikten per familie en als je twee dikten gebruikt die bij elkaar in de buurt liggen (zoals 600 en 700), kan dat ertoe leiden dat slechts één dikte goed wordt geladen. Adobe Fonts biedt variantspecifieke namen van lettertypefamilies aan voor die versies van de browser om deze fout te voorkomen.

De variantspecifieke naam moet waar nodig aan het begin van een font-family stack worden toegevoegd, vóór de naam van de hoofdfamilie:

#post-title {
font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
font-style: normal;
font-weight: 700;
}
#post-title { font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif; font-style: normal; font-weight: 700; }
#post-title {
  font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
  font-style: normal;
  font-weight: 700;
}

De namen bestaan uit de normale naam van de lettertypefamilie, gevolgd door een streepje, gevolgd door een beschrijving van de lettertypevariant. De variantspecifieke naam van brandon-grotesque die het lettertype met dikte 700 bevat, is bijvoorbeeld brandon-grotesque-n7.

De variantspecifieke naam is niet gedefinieerd in browsers die deze problemen niet ondervinden, dus deze gebruiken de volledige familienaam die als tweede in de stack staat.

De meeste gebruikers zullen deze aanvullende namen van lettertypefamilies niet hoeven te gebruiken. Je hoeft ze enkel toe te voegen als je problemen ziet met een correcte weergave van lettertypen in Internet Explorer 8.

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?