CSS dla zielonych - CSS
Czcionka CSS {font-size, font-family}
W jaki sposób zmienić wielkość i rodzaj czcionki na stronie WWW?
Podobnie jak w przypadku koloru tła oraz tekstu dobrze jest również ustalić rozmiar i krój czcionki na całej stronie.
body { font-size: rozmiar; font-family: rodzaj; }
- xx-small
- Czcionka najmniejsza
- x-small
- Czcionka bardzo mała
- small
- Czcionka mała
- medium
- Czcionka średnia
- large
- Czcionka duża
- x-large
- Czcionka bardzo duża
- xx-large
- Czcionka największa
Z definiowaniem kroju czcionki wiąże się pewien problem. Jeśli użytkownik oglądający Twoją stronę nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w systemie Windows najprawdopodobniej będzie to 'Times New Roman', chociaż to też nie jest pewne). Właśnie z tego powodu możliwe jest podanie po przecinku listy rodzajów czcionek, z których zostanie użyta ta, którą pierwszą w kolejności podawania będzie posiadał użytkownik. Dodatkowo na końcu listy można podać specjalną nazwę czcionki, która istnieje w każdym systemie operacyjnym - tzw. rodzinę ogólną. Pozwala ona określić krój czcionki, który wyglądem będzie przynajmniej przypominał efekt, który chcemy uzyskać - np.: sans-serif (podobna do: Arial, Helvetica, Verdana, Tahoma, 'Trebuchet MS'), serif (podobna do: 'Times New Roman', Georgia), monospace (podobna do: 'Courier New'). Na przykład:
body { font-size: medium; font-family: Arial, Helvetica, sans-serif; }
W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman', Arial, 'Courier New'. Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane były: Verdana, Tahoma, 'Trebuchet MS', Georgia - dlatego nawet dzisiaj wciąż są powszechnie dostępne. Przy definiowaniu czcionki dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np.: Helvetica - podobna do Arial).
Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu czcionek na stronach internetowych, zobacz rozdziały: Czcionki / Wielkość, Czcionki / Rodzaj.
Pytania i odpowiedzi {font-size, font-family}
Jak zwiększyć rozmiar czcionki?
W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklarację o odpowiedniej wartości. Na przykład: body { font-size: large; }
ustawi duży rozmiar tekstu na całej stronie.
Jak zmienić czcionkę w CSS?
W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklarację o odpowiedniej wartości. Na przykład: body { font-family: Arial, Helvetica, sans-serif; }
ustawi czcionkę Arial dla tekstu na całej stronie. Stanie się to jednak tylko wtedy, gdy użytkownik odwiedzający stronę będzie miał zainstalowaną taką czcionkę w swoim systemie operacyjnym. W przeciwnym razie automatycznie zostanie użyta czcionka Helvetica, a jeśli i to nie będzie możliwe, tekst zostanie wyświetlony przy pomocy czcionki najbardziej zbliżonej wyglądem.