font-variant
Włącza warianty kroju, na przykład kapitaliki albo cyfry o równej szerokości.
- Wartość domyślna
normal- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.fontVariant = "small-caps"
Przykład
#.scoreboard {
font-variant-numeric: tabular-nums;
}<table class="scoreboard stage" style="font-variant-numeric: tabular-nums;">
<tr><td>Ania</td><td style="text-align: right; padding-left: 24px;">1 240</td></tr>
<tr><td>Kuba</td><td style="text-align: right; padding-left: 24px;">980</td></tr>
<tr><td>Ola</td><td style="text-align: right; padding-left: 24px;">11 115</td></tr>
</table>Definicja i zastosowanie
#Właściwość font-variant to skrót dla kilku właściwości sterujących alternatywnymi znakami kroju. Najbardziej znana wartość to small-caps, czyli kapitaliki: małe litery zastąpione pomniejszonymi wielkimi.
Nowsze właściwości składowe, takie jak font-variant-numeric, pozwalają na przykład włączyć cyfry o jednakowej szerokości (tabular-nums). Dzięki temu liczby w tabelach i licznikach nie skaczą przy zmianie wartości.
Efekt zależy od kroju. Jeśli krój nie ma prawdziwych kapitalików, przeglądarka wygeneruje je sztucznie, a warianty OpenType po prostu się nie włączą.
Składnia
#font-variant: normal | small-caps | <warianty OpenType>;Wartości
#- Zwykłe znaki kroju.
- Kapitaliki: małe litery jako pomniejszone wielkie.
- Cyfry o jednakowej szerokości. Tu na przykładzie tekstu z liczbą 1 234 567.
Wartości w praktyce
#normal
.demo { font-variant: normal; }small-caps
.demo { font-variant: small-caps; }tabular-nums
.demo { font-variant: tabular-nums; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- W rankingach, cennikach i licznikach włącz
font-variant-numeric: tabular-nums, żeby kolumny cyfr równo się układały. - Kapitaliki dobrze sprawdzają się w skrótach, na przykład „NASA” w tekście ciągłym.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.