font: czcionka

style="font: [ font-style font-variant font-weight font-size/line-height font-family ]"


<div style="font: normal 2em Arial, Helvetica, sans-serif;">czcionka o wielkości 32px</div>
<div style="font: bold 20px Verdana, Times, serif;">czcionka o wielkości 24px</div>

wynik kodu

font-family: rodzaj czcionki

Rodziny ogólne
Oprócz podania rodzaju czcionki wprost, możliwe jest także wpisanie rodziny ogólnej:
serif - czcionka szeryfowa (końcówki znaków posiadają "ozdobniki"), np.: 'Times New Roman', Georgia, Garamond, Bodoni
sans-serif - czcionka bezszeryfowa (końcówki znaków są proste), np.: Arial, Verdana, 'Trebuchet MS', Helvetica, Univers, Futura
monospace - czcionka o stałej szerokości znaków - monotypiczna (wygląda, jak pisana na maszynie), np.: Courier, 'Courier New'
cursive - czcionka mająca pewne cechy pochyłej (wygląda, jak pisana ręcznie)
fantasy - czcionka fantazyjna (dekoracyjna)


<p style="font-family: Arial">To jest czcionka Arial</p>
<p style="font-family: 'Courier New'">To jest czcionka 'Courier New'</p>
<p style="font-family: 'Times New Roman">To jest czcionka 'Times New Roman'</p>
<p style="font-family: Verdana">To jest czcionka Verdana</p>

wynik kodu

To jest czcionka Arial

To jest czcionka 'Courier New'

To jest czcionka 'Times New Roman'

To jest czcionka Verdana

<p style="font-family: serif">To jest rodzina ogólna serif</p>
<p style="font-family: sans-serif">To jest rodzina ogólna sans-serif</p>
<p style="font-family: monospace">To jest rodzina ogólna monospace</p>
<p style="font-family: cursive">To jest rodzina ogólna cursive</p>
<p style="font-family: fantasy">To jest rodzina ogólna fantasy</p>

wynik kodu

To jest rodzina ogólna serif

To jest rodzina ogólna sans-serif

To jest rodzina ogólna monospace

To jest rodzina ogólna cursive

To jest rodzina ogólna fantasy

font-size: rozmiar czcionki

jednostki stosowane przy podawaniu wielkości czcionki: px, pt, cm, em, %


<div style="font-size: 32px;">czcionka o wielkości 32px</div>
<div style="font-size: 24px;">czcionka o wielkości 24px</div>
<div style="font-size: 18px;">czcionka o wielkości 18px</div>
<div style="font-size: 16px;">czcionka o wielkości 16px</div>
<div style="font-size: 12px;">czcionka o wielkości 12px</div>

wynik kodu


<div style="font-size: 32pt;">czcionka o wielkości 32pt</div>
<div style="font-size: 24pt;">czcionka o wielkości 24pt</div>
<div style="font-size: 18pt;">czcionka o wielkości 18pt</div>
<div style="font-size: 16pt;">czcionka o wielkości 16pt</div>
<div style="font-size: 12pt;">czcionka o wielkości 12pt</div>

wynik kodu


<div style="font-size: 2cm;">czcionka o wielkości 2cm</div>
<div style="font-size: 1.5cm;">czcionka o wielkości 1.5cm</div>
<div style="font-size: 1.125cm;">czcionka o wielkości 1.125cm</div>
<div style="font-size: 1cm;">czcionka o wielkości 1cm</div>
<div style="font-size: 0.75cm;">czcionka o wielkości 0.75cm</div>

wynik kodu


<div style="font-size: 2em;">czcionka o wielkości 2em</div>
<div style="font-size: 1.5em;">czcionka o wielkości 1.5em</div>
<div style="font-size: 1.125em;">czcionka o wielkości 1.125em</div>
<div style="font-size: 1em;">czcionka o wielkości 1em</div>
<div style="font-size: 0.75em;">czcionka o wielkości 0.75em</div>

wynik kodu


<div style="font-size: 200%;">czcionka o wielkości 200%</div>
<div style="font-size: 150%;">czcionka o wielkości 150%</div>
<div style="font-size: 133%;">czcionka o wielkości 133%</div>
<div style="font-size: 100%;">czcionka o wielkości 100%</div>
<div style="font-size: 75%;">czcionka o wielkości 75%</div>

wynik kodu

font-size-adjust: numer

<div style="font-size-adjust: 0.5;">czcionka o wielkości 0.5</div>
<div style="font-size-adjust: 1;">czcionka o wielkości 1</div>
<div style="font-size-adjust: 1.5;">czcionka o wielkości 1.5</div>
<div style="font-size-adjust: 2;">czcionka o wielkości 2</div>
<div style="font-size-adjust: 2.5;">czcionka o wielkości 2.5</div>

wynik kodu

font-stretch: numer

COŚ MI TU CHYBA NIE DZIAŁA...
wynik kodu
normal condensed extra-condensed semi-condensed ultra-condensed expanded extra-expanded semi-expanded ultra-expanded

font-style: numer

<div style="font-style: normal;">Koko dżambo i do przodu.</div>
<div style="font-style: italic;">Koko dżambo i do przodu.</div>
<div style="font-style: oblique;">Koko dżambo i do przodu.</div>
<div style="font-style: inherit;">Koko dżambo i do przodu.</div>
<div style="font-style: initial;">Koko dżambo i do przodu.</div>

wynik kodu

font-variant

<div style="font-variant: normal;">Koko dżambo i do przodu.</div>
<div style="font-variant: small-caps;">Koko dżambo i do przodu.</div>

wynik kodu

font-weight: numer

<div style="font-weight: normal;">Koko dżambo i do przodu.</div>
<div style="font-weight: bold;">Koko dżambo i do przodu.</div>
<div style="font-weight: bolder;">Koko dżambo i do przodu.</div>
<div style="font-weight: lighter;">Koko dżambo i do przodu.</div>
<div style="font-weight: 100;">Koko dżambo i do przodu.</div>
<div style="font-weight: 200;">Koko dżambo i do przodu.</div>
<div style="font-weight: 300;">Koko dżambo i do przodu.</div>
<div style="font-weight: 400;">Koko dżambo i do przodu.</div>
<div style="font-weight: 500;">Koko dżambo i do przodu.</div>
<div style="font-weight: 600;">Koko dżambo i do przodu.</div>
<div style="font-weight: 700;">Koko dżambo i do przodu.</div>
<div style="font-weight: 800;">Koko dżambo i do przodu.</div>
<div style="font-weight: 900;">Koko dżambo i do przodu.</div>

wynik kodu