Atrybuty mieszane wariantu czcionki {font-variant}
W jaki sposób określić w jednym poleceniu wiele własności wariantu czcionki: połączenie liter (ligatury), wielkość liter (kapitaliki), formatowanie liczb oraz wyglądu indeksów dolnych i górnych w tekście?
selektor { font-variant: wartości atrybutów }Natomiast jako "wartości atrybutów" należy wpisać konkretne ustawienia wariantów czcionki. Możliwe są tutaj trzy sposoby:
- normal - wartość domyślna
- none - zablokowanie wszystkich rodzajów wariantów
- Dowolna liczba poniższych wartości rozdzielonych spacjami:
Polecenie to pozwala w wygodny sposób zdefiniować wszystkie atrybuty dotyczące wariantów czcionki. Już nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. Na przykład zamiast wpisywać kolejno:
p {
font-variant-ligatures: discretionary-ligatures;
font-variant-caps: small-caps;
font-variant-numeric: oldstyle-nums tabular-nums;
}wystarczy wpisać:
p {
font-variant: discretionary-ligatures small-caps oldstyle-nums tabular-nums;
}Jeśli zależy Ci na obsłudze również starszych przeglądarek, użyj: "font-variant: small-caps". Niestety tylko ten jeden wariant (zwykłe kapitaliki) ma szerokie wsparcie.
Przykład {font-variant}
Po wpisaniu:<p style="font-variant: small-caps oldstyle-nums"> To jest paragraf napisany małymi kapitałkami z cyframi nieco poprzesuwanymi w górę i w dół (zobacz: 0123456789). </p>otrzymamy na ekranie:
To jest paragraf napisany małymi kapitałkami z cyframi nieco poprzesuwanymi w górę i w dół (zobacz: 0123456789).
Pytania i odpowiedzi {font-variant}
Co to "font-variant"?
W CSS font-variant to właściwość, która określa wariant czcionki taki jak kapitaliki.
Co oznacza "font-variant" i jakie ma możliwe wartości?
Właściwość font-variant w CSS kontroluje wariant czcionki. Podstawowe dostępne wartości to: normal (domyślny wariant) oraz small-caps (kapitaliki). Wartość small-caps powoduje, że cały tekst będzie napisany wielkimi literami, ale o obniżonej wysokości.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
font-variant: wartość | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 3.5 1998-11-18 | 1 2003-06-23 |
font-variant: none | 52 2016-07-20 | 34 2014-12-01 | 79 2020-01-15 | 39 2016-08-02 | 9 2015-09-30 |
font-variant: normal | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 1 2003-06-23 |