font-sizeWłaściwość określa rozmiar lub wysokość, czcionki. font-sizewpływa nie tylko na czcionkę, do której jest zastosowany, ale jest również używany do obliczania wartości jednostek długości em, rem i ex.
p ( font-size: 20px; )font-sizemoże akceptować słowa kluczowe, jednostki długości lub procenty jako wartości. Należy jednak pamiętać, że gdy jest zadeklarowana jako część fontwłaściwości skróconej, font-sizejest wartością obowiązkową. Jeśli nie jest uwzględniony w skrócie, cały wiersz jest ignorowany.
Wartości długości (np. Px, em, rem, ex itp.), Do których są stosowane, font-sizenie mogą być ujemne.
Bezwzględne słowa kluczowe i wartości
.element ( font-size: small; )Akceptuje następujące bezwzględne wartości słów kluczowych:
xx-smallx-smallsmallmediumlargex-largexx-large
Te wartości bezwzględne są mapowane na określone rozmiary czcionek obliczane przez przeglądarkę. Ale możesz też użyć dwóch wartości słów kluczowych, które są zależne od rozmiaru czcionki elementu nadrzędnego.
Inne wartości bezwzględne to mm(milimetry), cm(centymetry), in(cale), pt(punkty) i pc(piki). Jeden punkt to 1/72 cala, a jeden pica to 12 punktów - wartości te są zwykle używane w przypadku dokumentów drukowanych.
Względne słowa kluczowe
.element ( font-size: larger; )largersmaller
Na przykład, jeśli element nadrzędny ma rozmiar czcionki równy small, element potomny o zdefiniowanym rozmiarze względnym largerrówny rozmiarowi czcionki mediumelementu podrzędnego.
Wartości procentowe
.element ( font-size: 110%; )Wartości procentowe, takie jak ustawienie rozmiaru czcionki na 110%, są również odniesione do rozmiaru czcionki elementu nadrzędnego, jak pokazano na poniższej demonstracji:
Zobacz Pen qdbELL by CSS-Tricks (@ css-tricks) na CodePen.
Jednostka em
.element ( font-size: 2em; )Jednostka em to jednostka względna oparta na obliczonej wartości rozmiaru czcionki elementu nadrzędnego. Oznacza to, że elementy podrzędne są zawsze zależne od rodzica, aby ustawić rozmiar czcionki. Na przykład:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )W powyższym przykładzie akapit będzie miał rozmiar czcionki 16 pikseli, ponieważ 1 x 16 = 16 pikseli, podczas gdy nagłówek będzie miał 32 piksele, ponieważ 2 x 16 = 32 piksele. Skalowanie typu w górę w zależności od rozmiaru czcionki elementu nadrzędnego ma wiele zalet, a mianowicie możemy zawijać elementy w kontenerze i wiedzieć, że wszystkie dzieci zawsze będą względem siebie względne:
Zobacz Pen Dowiedzieć się, jak działa jednostka em przez CSS-Tricks (@ css-tricks) w CodePen.
Jednostka rem
Jednak w przypadku jednostek rem rozmiar czcionki zależy od wartości elementu głównego (lub htmlelementu).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )W powyższym przykładzie jednostka rem jest równa 16 pikseli (ponieważ jest dziedziczona z elementu html/ root), a zatem rozmiar czcionki dla wszystkich elementów akapitu będzie obliczany na 24 piksele (1,5 x 16 = 24). W przeciwieństwie do jednostek em, akapit zignoruje stylizację wszystkich swoich elementów nadrzędnych poza korzeniem.
To urządzenie jest obsługiwane przez następujące przeglądarki:
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Pracuje | Pracuje | Pracuje | Pracuje | 10+ | Pracuje | Pracuje |
Była jednostka
.element ( font-size: 20ex; )W przypadku jednostek ex 1ex byłoby równe obliczonej wysokości małej litery x elementu głównego. W poniższym przykładzie htmlelement jest ustawiony na, 20pxa wszystkie inne rozmiary czcionek są określane przez wysokość x tej konkretnej czcionki.
Zobacz Pen Dowiedzieć się, jak działa ex unit przez CSS-Tricks (@ css-tricks) na CodePen.
Poeksperymentuj z pokazem powyżej, zastępując element font-familyna htmlelemencie, aby zobaczyć, jak zmieniają się inne rozmiary czcionek.
Jednostki rzutni
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Jednostki rzutni, takie jak vwi vh, ustawiają rozmiar czcionki elementu względem wymiarów rzutni:
- 1vw = 1% szerokości widocznego obszaru
- 1vh = 1% wysokości rzutni
Więc jeśli weźmiemy następujący przykład:
.element ( font-size: 100vh; )Następnie zostanie stwierdzone, że rozmiar czcionki elementu powinien zawsze wynosić 100% wysokości widoku (50vh to 50%, 15vh to 15% itd.). W poniższym demo spróbuj zmienić wysokość przykładu, aby zobaczyć rozciągnięcie typu:
Zobacz typ rozmiaru pióra z jednostkami vh według CSS-Tricks (@ css-tricks) w CodePen.
vw Jednostki różnią się tym, że ustawia wysokość liter na szerokość widocznego obszaru, więc w poniższej demonstracji musisz zmienić rozmiar okna przeglądarki w poziomie, aby zobaczyć te zmiany:
Zobacz typ rozmiaru pióra z jednostkami vw według CSS-Tricks (@ css-tricks) w CodePen.
Jednostki te są obsługiwane przez następujące przeglądarki:
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Należy zauważyć, że istnieją dwie inne jednostki rzutni: vmini vmax. Pierwsza wyszuka wartości vhi vwi ustawi rozmiar czcionki jako najmniejszą z dwóch, podczas gdy vmaxrozmiar czcionki zostanie ustawiony na największą z tych dwóch wartości.
Jednostka ch
.element ( font-size: 24ch; )chUrządzenie jest podobne do exurządzenia na tym, że będzie on ustawiony rozmiar czcionki elementu w stosunku do szerokości (zero) glifem czcionki 0:
Zobacz typ Pen Sizing z jednostkami ch według CSS-Tricks (@ css-tricks) w CodePen.
To urządzenie jest obsługiwane przez:
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Pracuje | 10+ | Pracuje | 9+ | Pracuje | Pracuje |