Font-size

CSS vlastnost font-size urΦuje velikost pφsma.

Pokud nenφ velikost pφsma deklarovßna v∙bec, kreslφ se u normßlnφch tag∙ ve v∞t╣in∞ p°φpadech velikostφ 16px (vypozorovßno). To je tedy v²chozφ velikost (odpovφdß velikosti medium, v Exploreru small). Velikost pφsma se dß zadat i souhrnnou vlastnostφ font.

Velikost pφsma se dß zadat celou °adou jednotek. V nßsledujφcφ tabulce je pßr p°φklad∙. Druh pou╛itΘ jednotky ovliv≥uje, zda si bude u╛ivatel Internet Exploreru moci pφsmo zv∞t╣it p°φkazem Zobrazit > Velikost.

U procentußlnφch hodnot font-size se velikost pφsma odvozuje od velikosti zd∞d∞nΘ z nad°azen²ch tag∙. Jinak °eΦeno font-size je vlastnost d∞diΦnß. Pokud tedy nap°. nastavφm body na velikost 12px, budou se procentußlnφ velikosti v╣eho poΦφtat od t∞ch 12px (a kv∙li t∞m pixel∙m nebudou zv∞t╣ovacφ).

Zv∞t╣ovßnφ v Exploreru se d∞lß t°eba nabφdkou Zobrazit > Velikost pφsma a je tam p∞t stup≥∙. Nebo funguje ctrl + koleΦko my╣i.

KlφΦovß slova pro velikost pφsma byla (podle mΘho ·sudku) zavedena jako napodobenφ html stup≥∙ velikosti pφsma tagu <font>. Jsou v Exploreru zv∞t╣ovacφ, ale jejich v²slednß velikost zßvisφ na prohlφ╛eΦi (tak╛e se moc nepou╛φvajφ). P°esn∞ji vzato to zßvisφ na tom, jestli prohlφ╛eΦ pracuje ve quirk nebo standardnφm m≤du:

Zdroj: vlastnφ m∞°enφ -- p°φklad. Z tabulky vypl²vß, ╛e p°i pou╛itφ klφΦov²ch slov kreslφ Explorer v╣echno o jeden stupe≥ v∞t╣φ. Zßkladnφ velikost toti╛ v Exploreru (quirk mode) odpovφdß hodnot∞ small, v jin²ch prohlφ╛eΦφch medium. Od toho se odvφjφ ten problΘm zv∞t╣enφ pφsma v Exploreru. JedinΘ, co kreslφ v╣echny prohlφ╛eΦe stejn∞, je velikost nijak neovlivn∞nΘho textu (16 px).

Podpora

Velmi dob°e podporovanß vlastnost.

Zv∞t╣ovßnφ pφsma

Hodn∞ mßlo u╛ivatel∙ vφ o tom, ╛e si v prohlφ╛eΦi mohou pφsmo zv∞t╣it. D∙vody:

• nikdo jim to neukßzal a nevysv∞tlil
• n∞kterΘ strßnky majφ pφsmo ud∞lßny tak, ╛e se v Internet Exploreru zv∞t╣it nedß

Kdy╛ u╛ivatel poprvΘ zkusφ zv∞t╣it pφsmo a nic se nestane, tak u╛ to podruhΘ nezkusφ. Auto°i strßnek, kte°φ zadßvajφ pφsmo v Exploreru nezv∞t╣ovacφ (zadanΘ v px nebo v pt) tak vychovßvajφ u╛ivatele k nepou╛φvßnφ zv∞t╣ovßnφ. Je ale d∙le╛itΘ poΦφtat se zv∞t╣ovßnφm pφsma p°i nßvrhu designu. Hodn∞ strßnkßm se p°i zv∞t╣ovßnφ nebo zmen╣ovßnφ pφsma rozpadajφ grafickΘ prvky (zejm. menu).

Obecn∞ se doporuΦuje pou╛φvat na jednΘ strßnce pouze jednu jednotku (nap°φklad v╣ude em nebo pixely). Osobn∞ doporuΦuji trochu jinou v∞c. Mßm dobrΘ zku╣enosti se zadßnφm velikosti menu a ·zk²ch prvk∙ v pixelech. Na dlouhΘ texty doporuΦuji zadßvßnφ pomocφ em nebo procenty, proto╛e takovΘ pφsmo se pro Φtenφ dß zv∞t╣ovat.

P°φklady

Vlastnosti ovliv≥ujφcφ cel² dokument jsou zapsßny ve stylopisu:

<style>
p {font-size: 13px} /* v╣echny odstavce <p> budou mφt pφsmo velkΘ 13 pixel∙ */
td {font-size: small} /* v╣echno pφsmo v bu≥kßch tabulky <td> bude "malΘ" */
.patka {font-size: 90%} /* element, kter² mß nastaveno class="patka", bude zmen╣en */
</style>

Jin² p°φklad ukazuje pou╛itφ p°φmΘho stylu:

<span style="font-size: large">velik² text</span>

Atribut style se m∙╛e takto pou╛φt u libovolnΘho prvku, ale je to moc pracnΘ.

Dal╣φ p°φklad ukazuje, jak se zastarale velikost pφsma zadßvala tagem <font>, nap°φklad:

<font size="6">VelikΘ pφsmo</font>

Velikost je Φφslo od 1 do 7, jsou to html stupn∞ pφsma. Pou╛itφ tagu <font> nedoporuΦuji a nepat°φ to do CSS. Zmi≥uji to jenom pro ·plnost.

Zlatß procentnφ cesta

Auto°i Φasto cht∞jφ, aby jejich strßnky vypadaly ve v╣ech d∙le╛it²ch prohlφ╛eΦφch stejn∞, tj. aby velikost pφsma byla v╣ude stejnß. Proto Φasto nastavujφ velikost pφsma v pixelech. To skuteΦn∞ zaruΦφ stejnost, ale pφsmo pak nep∙jde zv∞t╣ovat (co╛ pro hodn∞ u╛ivatel∙ znamenß, ╛e nep∙jde p°eΦφst, zejmΘna pokud je velikost pφsma jedenßct pixel∙.) Pokud se ale pφsmo nastavφ v jednotkßch em (aby ╣lo zv∞t╣ovat), pak v Exploreru 5 bude o jeden stupe≥ men╣φ, ne╛ v Mozille.

╪e╣enφm je v╣echno zadßvat v procentech. Nap°.

body {font-size: 80%}

pφsmo pak bude v celΘm dokumentu trochu men╣φ (asi 13px za normßlnφch okolnostφ), co╛ je p°φjemnΘ, proto╛e dßle nenφ pro normßlnφ text pot°eba cokoli nastavovat. Kdy╛ pak chci mφt n∞kde t°eba nadpis zase v∞t╣φ (a zv∞t╣ovacφ), napφ╣u t°eba

h3 {font-size: 125%}

tφm se velikost za normßlnφch okolnostφ dostane zase na asi 16px. Chce to um∞t trochu poΦφtat procenta, ale je to jedin² zp∙sob, jak dob°e vyjφt jak s divn²m Internet Explorerem 5 (kter² nemß m≤dy) a zßrove≥ s modernφ Mozillou.

Dal╣φ p°φklad

Porovnßnφ velikosti pφsem v prohlφ╛eΦφch

Vizte tΘ╛

M≤dy prohlφ╛eΦ∙, Font, Line-height = v²╣ka °ßdku, Jednotky v CSS

Odkazy

HTML tag <big>, HTML tag <small>