Utwórz konto Logowanie

CSS

Font-size

Kooba

font-size - definiuje wielkość czcionki dla elementu.

Wielkość czcionki można zadeklarować na 4 sposoby:

1. Przy użyciu stałych

  • xx-small - najmniejsza
  • x-small - mniejsza
  • small - mała
  • medium - średnia
  • large - duża
  • x-large - większa
  • xx-large - największa

x-large
x-small
<div style="border: 1px solid #d0d0d0; background-color: #f0f0f0; padding: 4px;">
<div style="font-size: x-large">x-large</div>
<div style="font-size: x-small">x-small</div>
</div>
<b>2. Przy użyciu jednostek długości (px|mm|cm|in|pt|pc|em|ex)</b>

<code class="html4strict">
<div style="font-size: 12px">12px</div>
<div style="font-size: 12pt">12pt</div>
12px
12pt
Zobacz także [[CSS/Jednostki]]

3. Procent wielkości rodzica

połowa wielkości normalna wielkość dwa razy większa wielkość
<div style="border: 1px solid #d0d0d0; background-color: #f0f0f0; padding: 4px;">
<div><span style="font-size: 50%">połowa wielkości</span> normalna wielkość <span style="font-size: 200%">dwa razy większa wielkość</span></div>
</div>

<b>4. Wartości względne</b>
* <i>smaller</i> - mniejsza od bieżącej
* <i>larger</i> - większa od bieżącej
<code class="html4strict">
<span style="font-size: smaller">smaller</span> normalny <span style="font-size: larger">larger</span>
smaller normalny larger

Definiowanie wielkości czcionki dla całej strony

Aby zdefiniować wielkość czcionki dla wszystkich elementów na stronie należy zdefiniować ją dla elementu [[(x)html/body]].

body { font-size: 10pt }

lub

<body style="font-size: 10pt"> ``` Dobrym zwyczajem jest zadeklarować odpowiednią wielkość dla elementu body, a w elementach potomnych skalować tylko przy pomocy [[CSS/jednostki]] em. Zobacz http://riddle.jogger.pl/id/151972

Polecenia pokrewne

* [[css/font]] - [[css/font-size-adjust]]

Odpowiednik html

* tag [[(x)html/font]] lub [[(x)html/basefont]] z atrybutem [[(x)html/atrybuty/size]] ([[(X)HTML/Deprecated|Przestarzały]])

Wersja specyfikacji

* CSS 1

Wsparcie przeglądarek

* Opera 3.5 * Internet Explorer 3
CSS

0 komentarzy