Rozmiar czcionki CSS
Rozmiar czcionki
Właściwość font-sizeustawia rozmiar tekstu.
Możliwość zarządzania rozmiarem tekstu jest ważna w projektowaniu stron internetowych. Nie należy jednak używać dopasowywania rozmiaru czcionki, aby akapity wyglądały jak nagłówki lub nagłówki wyglądały jak akapity.
Zawsze używaj właściwych znaczników HTML, takich jak <h1> - <h6> dla nagłówków i <p> dla akapitów.
Wartość rozmiaru czcionki może być rozmiarem bezwzględnym lub względnym.
Rozmiar bezwzględny:
- Ustawia tekst na określony rozmiar
- Nie pozwala użytkownikowi na zmianę rozmiaru tekstu we wszystkich przeglądarkach (niekorzystne ze względu na ułatwienia dostępu)
- Rozmiar bezwzględny jest przydatny, gdy znany jest fizyczny rozmiar danych wyjściowych
Względna wielkość:
- Ustawia rozmiar względem otaczających elementów
- Umożliwia użytkownikowi zmianę rozmiaru tekstu w przeglądarkach
Uwaga: Jeśli nie określisz rozmiaru czcionki, domyślny rozmiar zwykłego tekstu, takiego jak akapity, to 16px (16px=1em).
Ustaw rozmiar czcionki w pikselach
Ustawienie rozmiaru tekstu za pomocą pikseli daje pełną kontrolę nad rozmiarem tekstu:
Przykład
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Wskazówka: jeśli używasz pikseli, nadal możesz użyć narzędzia powiększania, aby zmienić rozmiar całej strony.
Ustaw rozmiar czcionki za pomocą Em
Aby umożliwić użytkownikom zmianę rozmiaru tekstu (w menu przeglądarki), wielu programistów używa em zamiast pikseli.
1em jest równy aktualnemu rozmiarowi czcionki. Domyślny rozmiar tekstu w przeglądarkach to 16px. Tak więc domyślny rozmiar 1em to 16px.
Rozmiar można obliczyć z pikseli na em za pomocą tego wzoru: piksele /16= em
Przykład
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
W powyższym przykładzie rozmiar tekstu w em jest taki sam, jak w poprzednim przykładzie w pikselach. Jednak dzięki rozmiarowi em możliwe jest dostosowanie rozmiaru tekstu we wszystkich przeglądarkach.
Niestety ze starszymi wersjami Internet Explorera nadal występuje problem. Tekst staje się większy niż powinien, gdy jest większy, i mniejszy niż powinien, gdy jest mniejszy.
Użyj kombinacji procentów i Em
Rozwiązaniem, które działa we wszystkich przeglądarkach, jest ustawienie domyślnego rozmiaru czcionki w procentach dla elementu <body>:
Przykład
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Nasz kod działa teraz świetnie! Pokazuje ten sam rozmiar tekstu we wszystkich przeglądarkach i umożliwia wszystkim przeglądarkom powiększanie lub zmianę rozmiaru tekstu!
Responsywny rozmiar czcionki
Rozmiar tekstu można ustawić za pomocą vwjednostki, co oznacza „szerokość rzutni”.
W ten sposób rozmiar tekstu będzie zgodny z rozmiarem okna przeglądarki:
Witaj świecie
Zmień rozmiar okna przeglądarki, aby zobaczyć, jak skaluje się rozmiar czcionki.
Przykład
<h1 style="font-size:10vw">Hello World</h1>
Rzutnia to rozmiar okna przeglądarki. 1vw = 1% szerokości widocznego obszaru. Jeśli wizjer ma szerokość 50 cm, 1vw ma 0,5 cm.