Compare Revisions

Rozdílná velikost písma

Change Revisions

Revision 262992:

Revision 262992 by Majda on

Revision 230430:

Revision 230430 by Majda on

Title:
Rozdílná velikost písma
Rozdílná velikost písma
Slug:
Opravy_chyb_webmasterů/Rozdílná_velikost_písma
Opravy_chyb_webmasterů/Rozdílná_velikost_písma
Tags:
Vývoj_pro_web, Webové_standardy
Content:

Revision 262992
Revision 230430
t7    <p>t
8      {{ PředchozíNásledující("Opravy chyb webmasterů:Různý box m
>odel", "Opravy chyb webmasterů:Zpětná lomítka") }} 
9    </p>
10    <p>
11      Při prohlížení některých webových stránek v prohlížeči se z
>obrazovacím jádrem Gecko (Mozilla, Firefox, Netscape, K-Meleon aj 
>.) můžeme zjistit, že mají nápadně malé písmo, zatímco v MSIE je  
>vše <i>v pořádku</i>. Znamená to, že jsme opět narazili na někter 
>ou interpretační chybu v MSIE. Chyby jsou v zásadě dvě. Klíčová s 
>lova 
12    </p>
13    <p>
14      Když definujeme v CSS velikost písma, můžeme použít tři typ
>y zápisu: 
15    </p>
16    <ol>
17      <li>
18        <i>absolutní jednotky</i> - např. body (pt), chybně ale t
>aké pixely (px). 
19      </li>
20      <li>
21        <i>relativní jednotky</i> - em, ex, ale také procenta.
22      </li>
23      <li>
24        <i>klíčová slova</i> - x-small, medium apod.
25      </li>
26    </ol>
27    <p>
28      Chyba způsobená klíčovými slovy je charakteristická právě t
>ím, že v prohlížečích s jádrem Gecko je při použití klíčových slo 
>v písmo zhruba o jeden řád menší, než v MSIE. Příčiny problému s  
>klíčovými slovy jsou dvě (v závislosti na zápisu CSS). 
29    </p>
30    <ol>
31      <li>MSIE a Gecko používají sice stejnou velikost písma jako
> výchozí, ale MSIE má stupnici posunutou o jeden dílek výš. 
32      </li>
33      <li>Každé klíčové slovo je jen zástupným pojmem pro konkrét
>ní velikost určenou koeficientem vůči základní velikosti. Při pře 
>vodu mezi jednotlivými velikostmi jsou však používány různé koefi 
>cienty (1.5 pro CSS 1 a 1.2 pro CSS 2). 
34      </li>
35    </ol>
36    <p>
37      Proto dochází k chybnému zobrazení velikostí písma. Na tent
>o problém existuje <a class="external" href="http://www.alistapar 
>t.com/articles/relafont/">speciální hack</a>, který je popsán na  
>webu <a class="external" href="http://www.alistapart.com/">A list 
> apart</a>. Rozumnějším řešením je však klíčová slova k definici  
>velikosti písma vůbec nepoužívat. 
38    </p>
39    <h3 id="Chybn.C3.A9_d.C4.9Bd.C4.9Bn.C3.AD" name="Chybn.C3.A9_
>d.C4.9Bd.C4.9Bn.C3.AD"> 
40      Chybné dědění
41    </h3>
42    <p>
43      Špatná velikost písma v důsledku dědění se projevuje při po
>užívání tabulek a relativních jednotek velikosti písma. MSIE obsa 
>huje chybu, kdy obsah tabulky nezdědí velikost písma z nadřazenéh 
>o prvku. Co si pod tím představit? Mějme následující definice: CS 
>S: 
44    </p>
45    <pre>
46body {
47    font-size: 90%;
48}
49 
50table {
51    font-size: 75%;
52}
53</pre>
54    <p>
55      A jak je budou prohlížeče intepretovat?
56    </p>
57    <ul>
58      <li>MSIE zobrazí písmo v tabulce velikosti <b>75&nbsp;%</b>
59      </li>
60      <li>Moderní prohlížeč ovšem zdědí velikost z těla dokumentu
>, takže vypočítá 75&nbsp;% z 90&nbsp;%. Zobrazená velikost písma  
>tedy bude <b>67,5&nbsp;%</b>. 
61      </li>
62    </ul>
63    <p>
64      I na tento problém však řešení existuje. Pokud používáte ab
>solutní jednotky, je velice jednoduché. Stačí, když určíte veliko 
>st písma i tabulce a jejím buňkám a nebudete se spoléhat, že elem 
>ent správnou velikost zdědí. Při používání relativních jednotek j 
>e situace komplikovanější, neboť tam dochází vždy k přepočtu veli 
>kosti ze zděděné velikosti (14px ze 14px je stále 14px, zatímco 8 
>0&nbsp;% z 80&nbsp;% je 64&nbsp;%). I tento problém však pečliví  
>autoři zvládnou a podaří se jej eliminovat i pro relativní veliko 
>sti písma. 
65    </p>
66    <p>
67      Poznámka: Měli bychom se vyhnout definicím pomocí absolutní
>ch velikostí, neboť uživatel prohlížeče MSIE nemůže změnit takto  
>určenou velikost písma. Kvůli zneužívání absolutních jednotek něk 
>teré prohlížeče dokáží měnit i takto definovanou velikost písma.  
>Pokud se na absolutní jednotky webmaster spolehne, může se zvětše 
>ní písma na vzhledu jeho stránky neblaze projevit. Proto je lepší 
> nepoužívat absolutní jednotky a počítat s možností zvětšovat pís 
>mo. 
68    </p>
69    <h3 id="Souvisej.C3.ADc.C3.AD_odkazy" name="Souvisej.C3.ADc.C
>3.AD_odkazy"> 
70      Související odkazy
71    </h3>
72    <ul>
73      <li>
74        <a class="external" href="http://www.w3.org/QA/Tips/font-
>size">Care With Font Size</a> (w3.org) 
75      </li>
76      <li>
77        <a class="external" href="http://www.w3schools.com/css/cs
>s_units.asp">CSS units</a> (w3schools.com) 
78      </li>
79      <li>
80        <a class="external" href="http://www.w3schools.com/css/pr
>_font_font-size.asp">CSS Font-size property</a> (w3schools.com) 
81      </li>
82    </ul>
83    <p>
84      {{ PředchozíNásledující("Opravy chyb webmasterů:Různý box m
>odel", "Opravy chyb webmasterů:Zpětná lomítka") }} 
85    </p>
86    <div class="originaldocinfo">
87      <h2 id="Informace_o_p.C5.AFvodn.C3.ADm_dokumentu" name="Inf
>ormace_o_p.C5.AFvodn.C3.ADm_dokumentu"> 
88        Informace o původním dokumentu
89      </h2>
90      <ul>
91        <li>Autor: Josef Kotva
92        </li>
93      </ul>
94    </div>

Back to History