Web.Reporter.pl Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przykładami
autor: Dariusz Majgier • ostatnia aktualizacja kursu: 2003.06.01

[Start] • [Elementy HTML] • [Atrybuty HTML] • [Style CSS] • [Porady online]
[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

font

Styl definiuje właściwości czcionki. Za pomocą tego jednego polecenia można ustalić wszystkie, następujące właściwości czcionki: font-family, font-size, font-style, font-variant, font-weight. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości ma znaczenie. Można podać wszystkie wartości poniższych styli lub tylko niektóre z nich, ale muszą wystąpić font-size i font-family.

Wartości:

• font-style - CSS1 / IE3, N4, O3.5
styl czcionki, np. font:italic;
• font-variant - CSS1 / IE4, N6, O3.5
wariant czcionki, np. font:small-caps;
• font-weight - CSS1 / IE3, N4, O3.5
grubość (waga) czcionki, np. font:bold;
• font-size - CSS1 / IE3, N4, O3.5
wielkość czcionki, np. font:14px;
• font-family - CSS1 / IE3, N4, O3.5
rodzina czcionki, np. font:sans-serif;
• caption - CSS2 / IE4, N6, O6
czcionka systemowa, jak w przyciskach, np. font:caption;
• icon - CSS2 / IE4, N6, O6
czcionka systemowa, jak w ikonach, np. font:icon;
• menu - CSS2 / IE4, N6, O6
czcionka systemowa, jak w menu, np. font:menu;
• message-box - CSS2 / IE5.5, N6, O6
czcionka systemowa, jak w komunikatach, np. font:message-box;
• small-caption - CSS2 / IE5.5, N6, O6
czcionka systemowa, jak w dymkach, np. font:small-caption;
• status-bar - CSS2 / IE5.5, N6, O6
czcionka systemowa, jak w pasku statusu, np. font:status-bar;
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. font:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiedniki HTML: FONT, I, B
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym 
<span style="font: bold 14px Helvetica, Arial, sans-serif;">
część wyrazów napisana jest inną czcionką</span>. 
A teraz znowu zwykły tekst.

Przykładowy tekst, w którym część wyrazów napisana jest inną czcionką. A teraz znowu zwykły tekst.

• Przykład 2:

<style type="text/css"><!--
body, td, br, p, center {font: 14px helvetica, sans-serif;}
b {font: bold 16px helvetica, sans-serif;}
--></style>

 
• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!