Przejdź do treści

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;
}
gdzie jako "rozmiar" należy wpisać:
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
Natomiast zamiast rodzaj należy wpisać krój czcionki (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa czcionki składa się z kilku wyrazów, to trzeba ją objąć w znaki apostrofu (np.: 'Times New Roman').

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.

Komentarze

Zobacz więcej komentarzy

Facebook