CSS - Czcionka (font)

Kaskadowe arkusze stylów pozwalają na modyfikowanie wyglądu czcionki poprzez zmianę jej parametrów. Możliwa jest zmiana czcionki, jej rozmiaru, wariantu, stylu oraz wagi (grubości).

Zobacz:


Kolor czcionki - color

Koloru czcionki ustawiany jest za pomocą właściwości color.

color: kolor | initial | inherit; 

Wartości właściwości color:

Wartość Opis
kolor Ustawia kolor obramowania (predefiniowany, szesnastkowy, rgb, itd.).
initial Ustawia wartość właściwości na domyślną.
Wartość domyślna zależy od przeglądarki.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>W tym akapicie, <span>ten fragment tekstu ma zmieniony kolor na czerwony</span>. Kolor tekstu zmieniany jest za pomocą właściwości color.</p>
span {color: red;}

W tym akapicie, ten fragment tekstu ma zmieniony kolor na czerwony. Kolor tekstu zmieniany jest za pomocą właściwości color.


Rodzina czcionki - font-family

Za pomocą właściwości font-family określa się czcionki, jakie mają być użyte dla tekstu elementu.

font-family: czcionka | initial | inherit;

Można określić więcej niż jedną czcionkę w deklaracji. Jeśli pierwsza w kolejności czcionka nie zostanie odnaleziona i wczytana przez przeglądarkę, będzie sprawdzana kolejna czcionka. Oprócz wskazania bezpośredniego czcionki na końcu deklaracji zalecane jest również wskazanie rodziny ogólnej czcionek. Dzięki temu, jeśli przeglądarka nie odnajdzie wskazanych czcionek, zastosuje domyślną czcionkę ze wskazanej rodziny ogólnej.
Kolejne czcionki oddzielane są przecinkami. Jeśli nazwa czcionki zawiera białe znaki, należy ją ująć w cudzysłów, jak np. "Times New Roman".

Wartości właściwości font-family:

Wartość Opis
czcionka Lista czcionek i/lub rodzina ogólna czcionek.
initial Ustawia wartość właściwości na domyślną.
Wartość domyślna zależy od przeglądarki.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>Ten akapit będzie wyświetlany czcionką "Arial Hebrew" lub jeśli przeglądarka jej nie odnajdzie czcionką "Tahoma", a jeśli i jej nie odnajdzie, zastosuje jedną z czcionek rodziny ogólnej "sans-serif".</p>
p {font-family: "Arial Hebrew", Tahoma, sans-serif;}

Ten akapit będzie wyświetlany czcionką "Arial Hebrew" lub jeśli przeglądarka jej nie odnajdzie czcionką "Tahoma", a jeśli i jej nie odnajdzie, zastosuje jedną z czcionek rodziny ogólnej "sans-serif".


Rozmiar czcionki - font-size

Rozmiar czcionki ustawiany jest za pomocą właściwości font-size.

font-size: rozmiar | procent | xx-small | x-small | small | smaller | medium | xx-large | x-large | large | larger | initial | inherit;

Wartości właściwości font-size:

Wartość Opis
rozmiar Rozmiar czcionki podawany w jednostkach bezwzględnych i względnych (px, pt, em, itd.). Na przykład 10pt.
procent Rozmiar czcionki podawany jest w procentach rozmiaru czcionki z elementu rodzica. Na przykład 75%.
xx-small Rozmiar xx-small.
x-small Rozmiar x-small.
small Rozmiar small.
smaller Rozmiar czcionki jest mniejszy, niż rozmiar czcionki elementu rodzica.
medium Rozmiar średni czcionki.
Wartość domyślna.
xx-large Rozmiar xx-large.
x-large Rozmiar x-large.
large Rozmiar large
larger Rozmiar czcionki jest większy, niż rozmiar czcionki elementu rodzica.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>W tym akapicie <span>część tekstu ma zmienioną wielkość czcionki na 11 punktów</span> za pomocą właściwości font-size.</p>
p {font-size: 9pt;}
span {font-size: 11pt;}

W tym akapicie część tekstu ma zmienioną wielkość czcionki na 11 punktów za pomocą właściwości font-size.


Styl czcionki - font-style

Styl czcionki ustawiany jest za pomocą właściwości font-style.

font-style: normal | italic | oblique | initial | inherit;

Wartości właściwości font-style:

Wartość Opis
normal Normalny styl czcionki.
Wartość domyślna.
italic Czcionka wyświetlana kursywą.
oblique Czcionka pochylona.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>W tym akapicie, <span>za pomocą wartości "italic" właściwości font-style</span>, część tekstu została wyświetlona kursywą.</p>
span {font-style: italic;}

W tym akapicie, za pomocą wartości "italic" właściwości font-style, część tekstu została wyświetlona kursywą.


Wariant czcionki - font-variant

Wariant czcionki ustawiany jest za pomocą właściwości font-variant.

font-variant: normal | small-caps | initial | inherit;

Wartości właściwości font-variant:

Wartość Opis
normal Normalna czcionka.
Wartość domyślna.
small-caps Wszystkie małe litery są zamieniane na duże, ale ich rozmiar jest mniejszy od domyślnego.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>W tym akapicie, <span>za pomocą wartości "small-caps" właściwości font-variant</span>, część tekstu została wyświetlona dużymi literami pomniejszonymi względem rozmiaru domyślnego.</p>
span {font-variant: small-caps;}

W tym akapicie, za pomocą wartości "small-caps" właściwości font-variant, część tekstu została wyświetlona dużymi literami pomniejszonymi względem rozmiaru domyślnego.


Waga czcionki - font-weight

Wagę czcionki (grubość) określa się za pomocą właściwości font-weight.

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | initial | inherit;

Wartości właściwości font-weight:

Wartość Opis
normal Zwykłe znaki. Odpowiednikiem jest wartość "400".
Wartość domyślna.
bold Pogrubione znaki.
bolder Bardziej pogrubione znaki.
lighter Delikatniejsze znaki.
100
200
300
400
500
600
700
800
900
Wartości od cienkich do grubych. "400" = "normal". "700" = "bold".
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>W tym akapicie, <span>za pomocą wartości "bold" właściwości font-weight</span>, część tekstu została pogrubiona.</p>
span {font-weight: bold;}

W tym akapicie, za pomocą wartości "bold" właściwości font-weight, część tekstu została pogrubiona.


Zbiorczy zapis właściwości czcionki - font

Zbiorczy zapis pozwala na zapisanie właściwości czcionki w jednej deklaracji.

font: -style -variant -weight -size/line-height -family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;

Wartości właściwości font:

Wartość Opis
font-style Styl czcionki.
Wartość domyślna "normal".
font-variant Wariant czcionki.
Wartość domyślna "normal".
font-weight Waga czcionki.
Wartość domyślna "normal".
font-size/line-height Rozmiar czcionki / wysokość linii.
Wartość domyślna "normal/normal".
font-family Rodzaj czcionki.
Wartość domyślna zależy od przeglądarki.
caption Czcionka używana w napisach np. listy rozwijalnej.
icon Czcionka używana w etykietach ikon.
menu Czcionka używana w menu rozwijalnym.
message-box Czcionka używana w oknach dialogowych.
small-caption Mniejsza wersja czcionki używanej w napisach np. listy rozwijalnej.
status-bar Czcionka używana w pasku stanu.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>Ten akapit ma właściwości czcionki ustalone za pomocą właściwości zbiorczej font.</p>
p {font: italic small-caps bold 11pt/25px "Arial Hebrew", Tahoma, sans-serif;}

Ten akapit ma właściwości czcionki ustalone za pomocą właściwości zbiorczej font.

Pominięcie w zapisie zbiorczym którejkolwiek z właściwości powoduje, że przeglądarka stosuje dla niej wartość domyślną.


Właściwości czcionki

Właściwość Opis CSS
@font-face Określa czcionkę do pobrania i wykorzystania, spoza grupy czcionek używanych przez przeglądarkę. 3
font Ustawia właściwości czcionki w jednej deklaracji. 1
font-family Określa rodzinę czcionki. 1
font-size Określa rozmiar czcionki. 1
font-style Określa styl czcionki. 1
font-variant Określa wariant czcionki 1
font-weight Określa wagę (grubość) czcionki. 1

Właściwość:

  • @font-face

została opisana w artykule CSS3 - Własna czcionka.