Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Czcionki

Wielkość czcionek

Email Drukuj PDF

Tematy: rodzina czcionek | style czcionek | warianty czcionek | waga czcionek | wielkość czcionek | pionowe proporcje

Dane w pigułce
Zastosowanie określa wielkość czcionki
Dziedziczenie tak
Wartości wielkość w jednostkach miary, wysokość w procentach normalnego, imienne wielkości absolutne (xx-small, x-small, small, medium, large, x-large, xx-large), imienne wielkości relatywne (smaller, larger).
Wartość domyślna medium
Przykład font-size: x-large; font-size:125%; font-size:12px
Uwagi  
Odpowiednik w HTML font size (przestarzały)

Aby zdefiniować wielkość czcionki, należy wpisać w definicji stylu font-size: wielkość.

Wielkość czcionki możemy regulować za pomocą czterech metod: imiennych wielkości absolutnych, wielkości relatywnych, wysokości w jednostkach miary i wysokości w procentach.

a. Imienne wielkości absolutne

<p style="font-size: wielkość absolutna">Treść akapitu</p>

Treść akapitu wyświetlana za pomocą wielkości xx-small

Treść akapitu wyświetlana za pomocą wielkości x-small

Treść akapitu wyświetlana za pomocą wielkości small

Treść akapitu wyświetlana za pomocą wielkości medium

Treść akapitu wyświetlana za pomocą wielkości large

Treść akapitu wyświetlana za pomocą wielkości x-large

Treść akapitu wyświetlana za pomocą wielkości xx-large

Interpretacja: Internet Explorer, Firefox, Opera, Chrome

b. Wielkości relatywne

larger, smaller (w stosunku do domyślnej)

<p style="font-size: wielkość relatywna">Treść akapitu</p>

Treść akapitu wyświetlana za pomocą wielkości larger

Treść akapitu wyświetlana za pomocą wielkości smaller

Interpretacja: Internet Explorer, Firefox, Opera, Chrome

c. Wielkość w jednostkach miary

W dokumencie można użyć szeregu jednostek miary: piksele (px), punkty (pt), centymetry (cm), cale (in), milimetry (mm) i pica (pc).

1px - piksele
1in = 2.54cm
1pt = 1/72in
1pc = 12pt
1em - krotność wielkości domyślnego pisma

Na przykład:

<p style="font-size: 14px">Treść akapitu</p>

<p style="font-size: 1cm">Treść akapitu</p>

<p style="font-size: 1.5em">Treść akapitu</p>

Treść akapitu wyświetlana za pomocą wielkości 14 pikseli (najpowszechniej używana w Internecie jednostka miary pisma)

Treść akapitu wyświetlana za pomocą wielkości 1 cm

Treść akapitu wyświetlana za pomocą wielkości 8 mm

Treść akapitu wyświetlana za pomocą wielkości 0,1 cala

Treść akapitu wyświetlana za pomocą wielkości 14 punktów

Treść akapitu wyświetlana za pomocą wielkości 1,5 pica

Treść akapitu wyświetlana za pomocą wielkości 1.5em

Interpretacja: Internet Explorer, Firefox, Opera, Chrome

d. Wielkość w procentach

Podanie wielkości w procentach powinno dać w efekcie procent wielkości domyślnej dla danego selektora, np. akapitu, tytułu itp.
Wszystkie trzy przeglądarki interpretują to polecenie częściowo błędnie, np. w odniesieniu do tytułu, choć akapit jest wyświetlany poprawnie.

Na przykład:

<h1 style="font-size: 125%">To jest tytuł stopnia pierwszego 125%</h1>

To jest tytuł stopnia pierwszego

To jest tytuł stopnia pierwszego 125%

Normalny akapit

Akapit 125%

Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15654084