Właściwość Font-size w CSS służy do określania wysokości i rozmiaru czcionki. Wpływa na wielkość tekstu elementu. Jego domyślna wartość to średnia i można ją zastosować do każdego elementu. Wartości tej właściwości obejmują xx-mały , mały , x-mały itp.

Składnia

 font-size: medium|large|x-large|xx-large|xx-small|x-small|small|; 

Rozmiar czcionki może być względny lub bezwzględny.

Absolutny rozmiar

Służy do ustawienia określonego rozmiaru tekstu. Używając rozmiaru bezwzględnego, nie można zmienić rozmiaru tekstu we wszystkich przeglądarkach. Jest to korzystne, gdy znamy fizyczny rozmiar wyniku.

Względna wielkość

Służy do ustawienia rozmiaru tekstu względem sąsiadujących elementów. Dzięki rozmiarowi względnemu możliwa jest zmiana rozmiaru tekstu w przeglądarkach.

q1 q2 q3 q4

UWAGA: Jeśli nie zdefiniujemy rozmiaru czcionki, to dla zwykłego tekstu, takiego jak akapity, domyślnym rozmiarem jest 16px, co równa się 1em.

Rozmiar czcionki w pikselach

Gdy ustalimy wielkość tekstu w pikselach, wówczas mamy pełną kontrolę nad wielkością tekstu.

Przykład

 #first { font-size: 40px; } #second { font-size: 20px; } <p id="first">This is a paragraph having size 40px.</p> <p id="second">This is another paragraph having size 20px.</p> 

Rozmiar czcionki z nimi

Służy do zmiany rozmiaru tekstu. Większość programistów woli W zamiast pikseli . Jest rekomendowany przez konsorcjum WWW (W3C). Jak wspomniano powyżej, domyślny rozmiar tekstu w przeglądarkach to 16 pikseli. Można więc powiedzieć, że domyślny rozmiar 1em Jest 16 pikseli .

Wzór na obliczenie rozmiaru z pikseli Do W Jest em = piksele/16 .

Przykład

 #first { font-size: 2.5em; /* 40px/16=2.5em */ } #second { font-size: 1.875em; /* 30px/16=1.875em */ } #third { font-size: 0.875em; /* 14px/16=0.875em */ } <p id="first">First paragraph.</p> <p id="second">Second paragraph</p> <p id="third">Third Paragraph.</p> 

Responsywny rozmiar czcionki

Rozmiar tekstu możemy ustawić za pomocą a jednostka vw , co oznacza „ szerokość rzutni '. Widoczny obszar to rozmiar okna przeglądarki.

wiersz i kolumna

1vw = 1% szerokości rzutni.

Jeśli szerokość rzutni wynosi 50 cm, wówczas 1vw jest równe 0,5 cm.

Przykład

Pierwszy akapit o szerokości 5vw.

Drugi akapit o szerokości 10vw.

Rozmiar czcionki z właściwością długości

Służy do ustawienia rozmiaru czcionki na długość. Długość może być wyrażona w cm, px, pt itp. Wartości ujemne długość właściwość nie jest dozwolona w rozmiarze czcionki.

Składnia

 font-size: length; 

Przykład

 .length { color:red; font-size: 5cm; } <p class="length">A paragraph having length 5cm.</p>