font-size
Ustawia rozmiar czcionki.
- Wartość domyślna
medium- Dziedziczona
- Tak
- Animowalna
- tak, jako długość
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.fontSize = "1.25rem"
Przykład
#html { font-size: 100%; }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
p { font-size: 1rem; }
small { font-size: 0.875rem; }<h1 style="font-size: clamp(1.75rem, 5vw, 2.5rem); margin: 0">Kurs CSS</h1>
<p style="font-size: 1rem; margin: 6px 0">Podstawowy tekst ma 1rem.</p>
<small style="font-size: 0.875rem; color: #a3a3a3;">Drobny dopisek ma 0.875rem.</small>Definicja i zastosowanie
#Właściwość font-size określa wielkość tekstu. Najczęściej używa się jednostek rem, em, px i procentów. 1rem to rozmiar czcionki elementu html (zwykle 16px), a 1em to rozmiar czcionki rodzica.
Jednostka rem jest przewidywalna, bo zawsze odnosi się do tej samej wartości. em bywa podstępne: przy zagnieżdżeniu rozmiary się mnożą. Za to em świetnie sprawdza się w odstępach wewnątrz komponentu, które mają rosnąć razem z jego tekstem.
Funkcja clamp(min, preferowany, max) pozwala tworzyć typografię płynną: rozmiar rośnie z szerokością ekranu, ale nie spada poniżej minimum i nie przekracza maksimum.
Składnia
#font-size: <długość> | <procent> | small | medium | large | larger | smaller | …;Wartości
#<długość>
Rozmiar w pikselach.<długość>
Półtora raza rozmiar czcionki elementuhtml.<procent>
Półtora raza rozmiar czcionki rodzica.- O stopień większy niż u rodzica.
clamp()
Płynny rozmiar zależny od szerokości okna, w granicach 1–2rem.
Wartości w praktyce
#14px
.demo { font-size: 14px; }1.5rem
html..demo { font-size: 1.5rem; }150%
.demo { font-size: 150%; }larger
.demo { font-size: larger; }clamp(1rem, 5vw, 2rem)
.demo { font-size: clamp(1rem, 5vw, 2rem); }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
#- Nie ustawiaj rozmiaru
htmlw pikselach.font-size: 100%szanuje ustawienia użytkownika, który powiększył czcionkę w przeglądarce. - Na telefonach pola formularzy z czcionką mniejszą niż 16px powodują przybliżanie strony w Safari na iPhonie.
Powiązane hasła
#- fontSkrót ustawiający styl, grubość, rozmiar, interlinię i krój czcionki naraz.
- line-heightUstawia wysokość linii tekstu, czyli odstęp między wierszami.
- font-familyWybiera krój pisma, z listą zapasowych krojów na wypadek braku pierwszego.
- font-weightUstawia grubość czcionki, od cienkiej po bardzo pogrubioną.
- clamp()Trzyma wartość w przedziale od minimum do maksimum, a pomiędzy pozwala jej płynnie rosnąć. Podstawa płynnej typografii.
- JednostkiPrzegląd jednostek długości w CSS: od stałych pikseli, przez em i rem zależne od czcionki, po jednostki okna, kontenera i siatki.
Widzisz błąd albo brakuje przykładu? Napisz do nas.