Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Na tej stronie znajdziesz więcej przykładów stylów tekstowych.

Zmodyfikujesz przykładowy arkusz stylów, aby używał różnych krojów pisma.

Informacja: Style tekstowe

CSS posiada kilka własności do określania stylu tekstu.

Istnieje wygodna, krótka własność font, której można użyć do określenia kilku cech na raz — na przykład:

  • pogrubienia, ustawienia kursywy oraz małych znaków,
  • rozmiaru,
  • wysokości linii,
  • typu fontu.
Przykład

p {font: italic 75%/125% "Comic Sans MS", cursive;}

Ta reguła określa kilka własności fontu, sprawiając, że wszystkie akapity będą pisane kursywą.

Rozmiar fontu jest określony jako trzy czwarte rozmiaru każdego nadrzędnego akapitu, a wysokość linii jest określona na 125% (co da trochę więcej przestrzeni).

Typ fontu jest określony jako Comic Sans MS, lecz jeśli ten font nie jest dostępny, wówczas przeglądarka użyje domyślnego fontu kursywy (a'la ręczne pismo).

Ta reguła dodatkowo wyłącza pogrubienie i małe litery (ustawiając je na normal):

Typy fontów

Nie da się przewidzieć, jakie fonty będzie posiadał czytelnik dokumentu. Zatem kiedy określasz typy fontów, dobrym pomysłem jest podanie listy alternatywnych.

Listę należy zakończyć jednym z domyślnych, wbudowanych fontów: serif, sans-serif, cursive, fantasy lub monospace, (niektóre z nich pasują do ustawień w opcjach Twojej przeglądarki).

Jeżeli dany typ fontu nie wspiera jakiejś funkcji w dokumencie, wówczas przeglądarka może zmienić go na inny. Na przykład, dokument może posiadać specjalne znaki, których font podstawowy nie obsługuje. Jeżeli przeglądarka znajdzie inny font, który obsługuje te znaki, wówczas zostanie on użyty.

Aby określić wyłącznie typ fontu, użyj własności font-family.

Rozmiary fontów

Czytelnik używający przeglądarki Mozilla może w opcjach ustawić domyślne rozmiary fontów i zmienić rozmiar tekstu podczas czytania stron, zatem dobrym pomysłem jest używanie relatywnych rozmiarów tam, gdzie tylko się da.

Możesz wykorzystać różne wbudowane wartości dla rozmiarów fontów, jak small, medium czy large. Możesz też użyć wartości relatywnych względem rozmiaru fontu nadrzędnego elementu, na przykład: smaller, larger, 150% lub 1.5.

Jeżeli trzeba, możesz określić bezpośredni rozmiar: 12px (12 pikseli) dla urządzenia wyświetlającego, lub 12pt (12 punktów) dla drukarki. Ten rozmiar jest nominalnie szerokością litery m, ale różne fonty mogą mieć różne rozmiary i możesz inaczej widzieć je względem rozmiaru, który określisz.

Aby określić sam rozmiary fontu, użyj własności font-size.

Wysokość linii

Wysokość linii określa odstępy między liniami. Jeżeli Twój dokument posiada długie akapity z wieloma liniami, większe niż normalnie odstępy sprawią, że będzie go łatwiej czytać, zwłaszcza, jeśli rozmiary fontu są małe.

Aby określić samą wysokość linii, użyj własności line-height.

Ozdobniki

Odrębna własność text-decoration może określać inne style, jak underline (podkreślenie) lub line-through (przekreślenie). Ustawiając tę własność na normal, usuniesz wszystkie ozdobniki.

Inne własności

Aby ustawić kursywę, użyj font-style: italic;
Aby ustawić pogrubienie, użyj font-weight: bold;
Aby określić, że wszystkie litery mają być małymi literami, użyj font-variant: small-caps;

Aby ustawić dowolną z nich indywidualnie, możesz ustawić wartość na normal lub inherit (dziedzicz).

Więcej szczegółów
Możesz określić style tekstowe na kilka innych sposobów.

Na przykład, niektóre własności wymienione w tym rozdziale mają inne wartości, których możesz użyć.

W złożonym arkuszu stylów unikaj używania skrótowej własności font, ponieważ ma to efekty uboczne (resetuje inne własności danego fontu).

Aby zapoznać się ze szczegółami własności fontów, zajrzyj do rozdziału Fonty w specyfikacji CSS. Aby zapoznać się ze szczegółami odnośnie dekoracji tekstu, zajrzyj Tutaj.

Zadanie: Określanie fontu

W prostych dokumentach możesz określić font elementu BODY, a reszta dokumentu będzie dziedziczyć jego ustawienia.

Wyedytuj swój plik CSS. Dodaj regułę, która zmieni font. Logicznie byłoby umieścić tę regułę na górze pliku CSS, ale będzie ona miała taki sam efekt niezależnie od miejsca położenia:

body {font: 16px "Comic Sans MS", cursive;}

Dodaj komentarz wyjaśniający regułę oraz dodaj białe znaki, aby całość pasowała do Twojego ulubionego schematu.

Odśwież okno przeglądarki, aby zobaczyć efekt. Jeżeli Twój system zawiera Comic Sans MS lub inny font kursywy, który nie obsługuje pochylenia, wtedy Twoja przeglądarka wybierze inny typ fontu dla pochylonego tekstu w pierwszej linii:

Cascading Style Sheets
Cascading Style Sheets

Z paska menu przeglądarki wybierz Widok – Rozmiar tekstu – Powiększ. Nawet jeśli określiłeś(aś) w stylu rozmiar 16 pikseli, użytkownik czytający dokument może zmienić jego rozmiar.

Wyzwanie
Nie zmieniając nic innego, powiększ dwukrotnie wszystkie sześć pierwszych liter w domyślnym foncie szeryfowym przeglądarki:
Cascading Style Sheets
Cascading Style Sheets

Co dalej?

Twój przykładowy dokument korzysta już z kilku nazwanych kolorów. Na następnej stronie znajdziesz listę nazwanych, standardowych kolorów oraz opis, jak można określić inne: Kolor

Autorzy i etykiety dokumentu

Etykiety: 
 Autorzy tej strony: teoli, Mgjbot, Verruckt, Ptak82, Psz, gandalf, Takenbot, Sheppy, Witia, Anonymous
 Ostatnia aktualizacja: teoli,