Na tΘto strßnce si m∙╛ete prohlΘdnout pφsma r∙zn²ch font∙, °ez∙ a
velikostφ, kterΘ jsou prakticky pou╛itelnΘ ve webov²ch strßnkßch. Jß zde
hledßvßm optimßlnφ varianty pro novΘ strßnky. Na tΘto strßnce si m∙╛ete prohlΘdnout pφsma r∙zn²ch font∙, °ez∙ a
velikostφ, kterΘ jsou prakticky pou╛itelnΘ ve webov²ch strßnkßch. Jß zde
hledßvßm optimßlnφ varianty pro novΘ strßnky.
Vizte tΘ╛ U╛ivatelskß pφsma a hlavn∞ P°ehled vlastnostφ CSS. M∙╛ete se takΘ pokusit vytvo°it dynamickΘ fonty.
Font se zadßvß CSS vlastnostφ font-family. Pou╛itelnΘ jsou jenom takovß pφsma, kterß jsou b∞╛n∞ roz╣φ°enß. U Φesk²ch pφsem je to Times New Roman, Arial a Courier New. Proto╛e doba pokroΦila, dajφ se dnes ·sp∞╣n∞ pou╛φt tΘ╛ pφsma Garamond, Arial Narrow, Verdana a MS Sans Serif.
Times New Roman - Garamond - Arial - Arial Narrow - Verdana - Courier New - MS Sans Serif
Sekundßrnφ font: pokud systΘm nenajde pφsmo zadanΘ ve strßnce,
zkusφ najφt pφsmo dal╣φ, kterΘ je uvedeno jako druhΘ za Φßrkou. Nap°φklad:
font-family: Verdana, Arial, Helvetica, sans-serif je spolehlivß
deklarace bezpatkovΘho pφsma.
Velikost pφsma se dß zadßvat absolutn∞ (v bodech = pt nebo pixelech px) nebo relativn∞ (v procentech nebo ve stupnφch). Zßkladnφ rozdφl je pak ten, ╛e relativn∞ zadanΘ pφsmo si m∙╛e u╛ivatel zv∞t╣it v prohlφ╛eΦi (velikost pφsma), co╛ u absolutn∞ zadan²ch velikostφ (pt, px apod.) nem∙╛e. Vebdesigne°i se li╣φ v nßzoru, co je lep╣φ a nemohou se shodnout.
Pro p°epoΦet bod∙ na pixely platφ 4pt = 3px; lze pou╛φt tΘ╛ mm, cm, in. Vizte p°ehled CSS jednotek. Stup≥∙ pφsma je 7, zadßvajφ se pomocφ slov typu large apod. (v tabulkßch nepou╛φvßm).
Tip: p°i nastavovßnφ velikosti pφsma nastavte takΘ v²╣ku °ßdku vlastnostφ line-height. Nenφ to nutnΘ, ale text se p°i vy╣╣φm °ßdku stßvß Φiteln∞j╣φm. Obvykle se dßvß v²╣ka °ßdku p°ibli╛n∞ o polovinu v∞t╣φ, ne╛ je v²╣ka pφsma.
Spolehlivß deklarace: V∞t╣inou nestaΦφ nastavit pφsmo pro celΘ t∞lo (tag <body>). Musφ se napsat n∞co jako:
body, p, li, td {font....}
aby to fungovalo na celou strßnku ve v╣ech prohlφ╛eΦφch. Pokud budete zadßvat velikost procenty, vynechte body, proto╛e by se to t∞mi procenty n∞kde nßsobilo vφcekrßt.
Times New Roman b²vß zßkladnφ font prohlφ╛eΦ∙. Pokud font nezadßte, pou╛ije prohlφ╛eΦ obvykle toto pφsmo. Je dob°e ΦitelnΘ z papφru, proto╛e mß patky. ╚itelnost na obrazovce je hor╣φ, p°esto pova╛uji Times za nejlep╣φ pφsmo.
| Normßlnφ | font-weight: bold | font-style: italic | tuΦnß kurzφva |
|---|---|---|---|
| font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
| font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
Garamond je patkovΘ pφsmo renesanΦnφho °ezu. Pozoruhodnß je zejmΘna kurzφva. Dφky patkßm je dob°e ΦitelnΘ. Pou╛φvß se zejmΘna na nadpisy. Pro b∞╛n² text se nedoporuΦuje, proto╛e je p°φli╣ vzdu╣nΘ. Na mnoha systΘmech toto pφsmo neb²vß nainstalovanΘ, proto se jistφ Timesem. ╪φdce se vyskytujφ problΘmy s Φesk²mi znaky.
| Normßlnφ | font-weight: bold | font-style: italic | tuΦnß kurzφva |
|---|---|---|---|
| font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
| font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
NejΦast∞ji pou╛φvanΘ pφsmo vynikß jednoduchostφ. Nemß patky, proto se ╣patn∞ Φte z papφru, ale pro obrazovku je velmi vhodnΘ. ProblΘmem tohoto fontu je "okoukanost" a p°φli╣nß zahu╣t∞nost prostoru. Neb²vajφ s nφm problΘmy, proto╛e pat°φ do zßklanφch instalacφ na v╣ech systΘmech. P°esto se n∞kdy jistφ Helveticou a sans-serifem. Chybuje v Φe╣tin∞ na Win 3.11 (a tak je lep╣φ deklarovat ho jako "Arial CE"). Je t°eba dßvat pozor na to, ╛e Arial je pφsmo opticky i fakticky vy╣╣φ, proto╛e mß vysokΘ malΘ znaky. Pou╛φvßte-li Arial zßrov∞≥ s Timesem, zmen╣ete Arial.
| Normßlnφ | font-weight: bold | font-style: italic | tuΦnß kurzφva |
|---|---|---|---|
| font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
| font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
Arial Narrow je nov∞j╣φ pφsmo. Mß velmi ·zkΘ znaky, ostatn∞ se podle toho jmenuje. Pou╛φvßm ho zejmΘna pro odkazovß tlaΦφtka, kterß pot°ebuji mφt ·zkß. Tento font se doporuΦuje na del╣φ texty, proto╛e aΦkoli nemß patky, nenφ tak robustnφ jako Arial, a tak je lΘpe Φiteln². Neb²vß na v╣ech systΘmech, proto se jistφ Arialem a sans-serifem. Hlavnφ nev²hodou je fakt, ╛e se na Internetu vyskytuje v r∙zn²ch variantßch, Φili na jeho vzhled nenφ spolehnutφ.
| Normßlnφ | font-weight: bold | font-style: italic | tuΦnß kurzφva |
|---|---|---|---|
| font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
| font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
NovΘ pφsmo vynikajφcφ svou kulatostφ se stßvß velmi oblφben²m. Pat°φ do skupin bezpatkov²ch pφsem, je trochu podobnΘ Arialu. Na rozdφl od Arialu nß ale ╣ir╣φ znaky a relativn∞ je╣t∞ vy╣╣φ malΘ znaky. Je velmi ╣patn∞ ΦitelnΘ, ale pokud se nastavφ malß velikost a vysokΘ °ßdky, dß se to skousnout. Na mnoha star╣φch systΘmech se nevyskytuje a obΦas mß problΘmy s Φesk²mi znaky. Jistφ se Arialem nebo Courierem.
| Normßlnφ | font-weight: bold | font-style: italic | tuΦnß kurzφva |
|---|---|---|---|
| font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
| font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
StrojovΘ pφsmo. Jedinou p°ednostφ tohoto o╣klivΘho pφsma je fakt, ╛e mß v╣echny znaky stejn∞ ╣irokΘ (oznaΦuje se jako "monotype"). Proto se hodφ pro r∙znΘ v²pisy k≤d∙, ve kter²ch musejφ znaky pod sebe zapadat. ObΦas se dß pou╛φt pro poutavΘ nadpisy. Prohlφ╛eΦe toto pφsmo pou╛φvajφ pro elementy <code>, <pre> a podobnΘ. Jistφ se star╣φ variantou Courier a generick²m monotype.
| Normßlnφ | font-weight: bold | font-style: italic | tuΦnß kurzφva |
|---|---|---|---|
| font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
| font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
SystΘmovΘ pφsmo. Je na v╣ech windowsßck²ch poΦφtaΦφch. Jinde se dß jistit sekundßrnφm fontem Geneva. Velmi z°φdka se stßvß, ╛e blbne s Φe╣tinou (obzvlß╣t∞ v editorech). P°esto╛e jde o pφsmo systΘmovΘ, je vcelku mßlo okoukanΘ, proto╛e ho nikdo po°ßdn∞ nepou╛φvß. PohlednΘ jsou zejmΘna men╣φ °ezy. Kurzφvu je lΘpe nepou╛φvat.
| Normßlnφ | font-weight: bold | font-style: italic | tuΦnß kurzφva |
|---|---|---|---|
| font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
font-size: 8pt
font-size: 10pt font-size: 11pt font-size: 12pt font-size: 13pt font-size: 14pt font-size: 16pt font-size: 18pt |
| font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
font-size: 80%
font-size: 90% font-size: 95% font-size: 100% font-size: 105% font-size: 110% font-size: 120% font-size: 130% |
Jak psßt web:
http://dusan.pc-slany.cz/internet/
Pφ╣e Yuh∙: autorova strßnka, mail: dusan@pc-slany.cz
Slßva koΦkßm! Poslednφ aktualizace 10.01.2002