font-size

Właściwość font-size określa rozmiar, lub wysokość, czcionki. font-size wpływa nie tylko na czcionkę, do której jest stosowana, ale jest również używana do obliczania wartości jednostek długości em, rem i ex.

p { font-size: 20px;}

font-size może przyjmować słowa kluczowe, jednostki długości lub procenty jako wartości. Ważne jest jednak, aby zauważyć, że gdy jest zadeklarowany jako część font shorthand property, font-size jest wartością obowiązkową. Jeśli nie jest ona zawarta w shorthandzie, cała linia jest ignorowana.

Wartości długości (np. px, em, rem, ex, etc), które są stosowane do font-size nie 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-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Te wartości bezwzględne są mapowane na określone rozmiary czcionek obliczane przez przeglądarkę. Ale możesz również użyć dwóch wartości słowa kluczowego, które są względne w stosunku do rozmiaru czcionki elementu nadrzędnego.

Inne wartości bezwzględne obejmują mm (milimetry), cm (centymetry), in (cale), pt (punkty) i pc (pikasy). Jeden punkt jest równy 1/72 cala, podczas gdy jedna pica jest równa 12 punktom – te wartości są zwykle używane dla dokumentów drukowanych.

Względne słowa kluczowe

.element { font-size: larger;}

• larger
• smaller

Na przykład, jeśli element rodzica ma rozmiar czcionki small, element dziecka ze zdefiniowanym rozmiarem względnym larger sprawi, że rozmiar czcionki będzie równy medium dla elementu dziecka.

Wartości procentowe

.element { font-size: 110%;}

Wartości procentowe, takie jak ustawienie font-size na 110%, są również względne w stosunku do rozmiaru czcionki elementu nadrzędnego, jak pokazano w poniższym demo:

Zobacz Pen qdbELL by CSS-Tricks (@css-tricks) na CodePen.

Jednostka em

.element { font-size: 2em;}

Jednostka em jest jednostką względną opartą na obliczonej wartości rozmiaru czcionki elementu nadrzędnego. Oznacza to, że elementy potomne są zawsze zależne od swojego rodzica, aby ustawić ich rozmiar czcionki. Na przykład:

<div class="container"> <h2>This is a heading</h2> <p>This is some text.</p></div>

.container { font-size: 16px;}p { font-size: 1em;}h2 { font-size: 2em;}

W powyższym przykładzie, akapit będzie miał font-size 16px, ponieważ 1 x 16 = 16px, podczas gdy nagłówek będzie miał 32px, ponieważ 2 x 16 = 32px. Istnieje wiele zalet skalowania czcionki w zależności od rozmiaru czcionki elementu nadrzędnego, a mianowicie możemy zawijać elementy w kontenerze i wiedzieć, że wszystkie dzieci będą zawsze względem siebie:

Zobacz pióro Figuring out how the em unit works by CSS-Tricks (@css-tricks) on CodePen.

Jednostka rem

W przypadku jednostek rem, rozmiar czcionki jest jednak zależny od wartości elementu root (lub elementu html).

html { font-size: 16px;}p { font-size: 1.5rem;}

W powyższym przykładzie jednostka rem jest równa 16px (ponieważ jest dziedziczona po elemencie html/root) i dlatego rozmiar czcionki dla wszystkich elementów akapitu będzie wynosił 24px (1.5 x 16 = 24). W przeciwieństwie do jednostek em, akapit zignoruje stylizację wszystkich swoich rodziców oprócz elementu root.

Jednostka ta jest obsługiwana przez następujące przeglądarki:

.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Works	Works	Works	Works	10+	Works	Works

Jednostka ex

.element { font-size: 20ex;}

Dla jednostek ex, 1ex byłby równy obliczonej wysokości małej litery x elementu root. Tak więc w poniższym przykładzie element html jest ustawiony na 20px, a wszystkie inne rozmiary czcionek są określane przez wysokość x tej konkretnej czcionki.

Zobacz pióro Figuring out how the ex unit works by CSS-Tricks (@css-tricks) on CodePen.

Eksperymentuj z powyższym demo zastępując font-family na elemencie html aby zobaczyć jak zmieniają się inne rozmiary czcionek.

Jednostki rzutni

.element-one { font-size: 100vh;}.element-two { font-size: 100vw;}

Jednostki rzutni, takie jak vw i vh, ustawiają rozmiar czcionki elementu względem wymiarów rzutni:

• 1vw = 1% szerokości rzutni
• 1vh = 1% wysokości rzutni

Jeśli więc weźmiemy następujący przykład:

.element { font-size: 100vh;}

Wtedy będzie to stanowić, że font-size elementu powinien zawsze wynosić 100% wysokości rzutni przez cały czas (50vh to byłoby 50%, 15vh to byłoby 15% i tak dalej). W poniższym demie spróbuj zmienić wysokość przykładu, aby zobaczyć, jak czcionka się rozciąga:

Zobacz typ Pen Sizing with vh units by CSS-Tricks (@css-tricks) on CodePen.

vwJednostki różnią się tym, że ustawiają wysokość literek przez szerokość rzutni, więc w poniższym demo będziesz musiał zmienić rozmiar okna przeglądarki w poziomie, aby zobaczyć te zmiany:

Zobacz typ Pen Sizing z jednostkami vw by CSS-Tricks (@css-tricks) on CodePen.

Jednostki te są obsługiwane przez następujące przeglądarki:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

Ważne jest, aby zauważyć, że istnieją dwie inne jednostki viewport: vmin i vmax. Pierwszy z nich znajdzie wartości vh i vw i ustawi font-size jako najmniejszą z tych dwóch, podczas gdy vmax ustawia font-size na największą z tych dwóch wartości.

Jednostka ch

.element { font-size: 24ch;}

Jednostka ch jest podobna do jednostki ex w tym, że ustawi font-size elementu w stosunku do szerokości 0 (zero) glifu czcionki:

Zobacz typ Pen Sizing with ch units by CSS-Tricks (@css-tricks) on CodePen.

Ta jednostka jest obsługiwana przez:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
27+	Works	10+	Works	9+	Works	Works

Właściwości powiązane

• font
• font-family
• font-stretch
• font-style
• font-variant
• font-weight

.