Jak zmienić rozmiar fontu na stronie internetowej z pomocą HTML i CSS?
Rozmiar fontu (czasami nazywanego również czcionką bądź krojem pisma) na stronie internetowej można zmienić na kilka różnych sposobów.
To na który z nich się zdecydujemy w dużej mierze zależy od nas (lub systemu CMS). W większości przypadków stosuje się jednak głównie formatowanie z pomocą CSS a HTML należy do rzadkości.
Co znajdziesz w tym wpisie
Zmiana rozmiaru fontu w HTML
W HTML rozmiar fontu zmieniamy z pomocą zmiennej <font>. Za jej pomocą możemy ustawić wielkość czcionki od 1 do 7. Zaczynamy wzrost od niższej liczby (czyli 1 tekst będzie mały a 7 olbrzymi) w praktyce wygląda to następująco:
<font size="n">Wielkość n</font>
W miejsce literki „n” wpisujemy odpowiednią wartość:
See the Pen
Font in HTML by Aura (@Julka85)
on CodePen.0
Czyli np.:
font-size: 1; font-size: 2; font-size: 3;
Jak widać uzyskaliśmy swoistą drabinkę, w której kolejny element ma inną wielkość.
Zmiana rozmiaru fontu z pomocą styli CSS
W CSS sprawa nie jest już taka łatwa. Rozmiar fontu możemy bowiem ustalać na kilka sposobów. Nie mniej jednak właściwością, która nam to umożliwia jest font-size (czyli dosłownie rozmiar fontu).
Domyślne wartości w CSS
Jednym ze sposobów określenia wielkości fontu jest skorzystanie z wielkości analogicznych jak w HTML tylko przeniesionych do CSS
See the Pen
Untitled by Aura (@Julka85)
on CodePen.0
Przykład:
font-size: xx-small; font-size: small; font-size: medium;
Podwiewam, że powyższe ustawienia są czymś w rodzaju reliktu z czasów kiedy strony miały bardzo proste struktury. Obecnie bowiem nie specjalnie kojarzę by poza jakimiś kursami spotkała się z tego typu zapisem.
Samodzielne ustalenie wielkości fontu
W większości przypadku nie będziemy korzystać na stronie z domyślnych wartości. Będziemy chcieli zazwyczaj ustalić samodzielnie rozmiar naszego kroju pisma, wystarczy w tedy, że zastąpimy znacznik wartością np.:
font-size:12px; font-size:10em;
gdzie wielkość czcionki / fontu to 12px lub 10em. W tym miejscu dobrze zapoznać się z moim wpisem na temat stosowanych wielkości, rozmiarów spotykanych na stronach internetowych. Wiedza ta może się okazać przydatna w celu uzyskania odpowiedniego rozmiaru tekstu.
Warto przeczytać: