Własność CSS font-width pozwala wybrać odmianę kroju pisma o określonej szerokości, a więc działa tylko w odniesieniu do rodzin fontów, które zawierają więcej niż tylko odmianę o szerokości podstawowej.
Wartości i składnia
Jako wartość własność font-width przyjmuje wartość procentową z przedziału od 0 do nieskończoności lub słowo kluczowe. Poniższa tabela przedstawia wykaz dostępnych słów kluczowych i odpowiadających im wartości procentowych.
| Słowo kluczowe | Wartość procentowa |
|---|---|
| ultra-condensed | 50% |
| extra-condensed | 62.5% |
| condensed | 75% |
| semi-condensed | 87.5% |
| normal | 100% |
| semi-expanded | 112.5% |
| expanded | 125% |
| extra-expanded | 150% |
| ultra-expanded | 200% |
Jeśli rodzina fontów nie obejmuje odmiany o wybranej szerokości, to przeglądarka wybiera najbliższą odmianę węższą (w przypadku wartości poniżej 100%) lub szerszą (w przypadku wartości powyżej 100%).
Przykład
Poniżej znajdują się przykłady kilku odmian szerokości fontu Roboto Flex. Pierwsza jest wersja ultraskondensowana:
font-stretch: ultra-condensed;Efekt:
Wersja skondensowana:
font-stretch: condensed;Efekt:
Wersja ultraszeroka:
font-stretch: ultra-expanded;Efekt:
Zastosowanie
Własność CSS font-width ma zastosowanie do wszystkich elementów HTML.
Podsumowanie
| Zastosowanie | Wszystkie elementy HTML |
|---|---|
| Obsługiwane wartości |
|
| Wartość początkowa | normal |
| Dziedziczenie | Tak |
| Specyfikacja | CSS Fonts Module Level 4, własność font-width |