De font-weighteigenschap stelt de dikte of dikte van een lettertype in en is afhankelijk van beschikbare lettertypen binnen een lettertypefamilie of gewichten die door de browser zijn gedefinieerd.
span ( font-weight: bold; )De font-weighteigenschap accepteert een trefwoordwaarde of een vooraf gedefinieerde numerieke waarde. De beschikbare trefwoorden zijn:
normalboldbolderlighter
De beschikbare numerieke waarden zijn:
100200300400500600700800900
De trefwoordwaarde wordt normaltoegewezen aan de numerieke waarde 400en de waarde wordt boldtoegewezen aan 700.
Om enig effect te zien met andere waarden dan 400of 700, moet het gebruikte lettertype ingebouwde vlakken hebben die overeenkomen met die opgegeven gewichten.
Als een lettertype een vetgedrukte ("700") of normale ("400") versie heeft als onderdeel van de lettertypefamilie, zal de browser die gebruiken. Als die niet beschikbaar zijn, bootst de browser zijn eigen vetgedrukte of normale versie van het lettertype na. Het zal de andere niet-beschikbare gewichten niet nabootsen. Lettertypen gebruiken vaak namen als "Normaal" en "Licht" om eventuele alternatieve lettertypegewichten te identificeren.
De volgende demo toont het gebruik van de alternatieve gewichtswaarden:
De bovenstaande demo maakt gebruik van het gratis lettertype Open Sans, ingebed met de Google Web Fonts API. Het lettertype wordt geladen met alle beschikbare lettertypegewichten en dus, met behulp van de font-weighteigenschap, worden de verschillende beschikbare gewichten weergegeven zoals beschreven door de tekst van elke alinea. De niet-beschikbare gewichten geven eenvoudig het logisch meest nabije gewicht weer.
Gangbare lettertypen zoals Arial, Helvetica, Georgia, enz. Hebben geen andere gewichten dan 400en 700. Dus dezelfde demo die wordt weergegeven met een van die lettertypen, geeft slechts twee gewichten weer in de negen alinea's.
Gebruik "krachtigere" en "lichtere" trefwoorden
De trefwoordwaarden bolderen lighterzijn relatief ten opzichte van het berekende lettertypegewicht van het bovenliggende element. De browser zoekt naar het dichtstbijzijnde "vetter" of "lichtere" gewicht, afhankelijk van wat beschikbaar is in de lettertypefamilie, anders kiest hij gewoon "400" of "700", afhankelijk van wat het meest logisch is.
Onderliggende elementen erven niet de trefwoordwaarden “vetter” en “lichter”, maar in plaats daarvan erven ze het berekende gewicht.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | Werken | Werken | Werken | Werken | Werken | Werken |