Nie každému sa môžu páčiť všetky druhy písma a ich veľkosti. Na tejto stránke používam nádherné písmo Palatino Linotype vo veľkosti 12px, ktoré sa používa skôr pre nadpisy ako pre texty. Mnohí sa sťažujú, že sa im zle číta, pretože sú pravdepodobne zvyknutý na zaostalý štandard, akým je napríklad Arial. Ustúpil som ich požiadavkám a vytvoril som skript pre zmenu písma a jeho veľkosti. Funguje veľmi jednoducho. Po zmene písma sa odošlú užívateľovi 2 cookies, z ktorých prvý určuje typ a druhý veľkosť. Tí, ktorí majú vypnutý JavaScript, samozrejme písmo meniť nemôžu.
Sprístupnil som zároveň stránku, na ktorej návštevníci nájdu vyžitie môjho skriptu. Odteraz si na nej môžu určiť sami, aké písmo a veľkosť budú používať na PaBi3.com. Nájdu tam najpoužívanejšie typy písma: Arial, Courier, Georgia, Lucida Console, Palatino Linotype, Tahoma, Times, Trebuchet MS, a Verdana. Táto stránka je samozrejme zbytočná napríklad pre užívateľov, ktorí používajú prehliadač Opera. Tí vedia, že sa veľkosť písma dá meniť pomocou prehliadača alebo môžu rovno použiť ich vlastné userCSS.
Použitie
Do hlavičky stránky (alebo inde) je potrebné umiestniť nasledujúci kód:
<script src='font.js' type='text/javascript'></script>
Kdekoľvek na stránke sa zmení písmo pomocou takýchto odkazov:
<a href='javascript:setFontFamily("Tahoma")'>Tahoma</a> - zmení typ písma na Tahoma
<a href='javascript:setFontSize(0)'>Pôvodná veľkosť</a> - obnoví pôvodnú veľkosť písma
<a href='javascript:setFontSize(-1)'>Zmenšiť veľkosť</a> - zmenší písmo o jednu jednotku
<a href='javascript:setFontSize(1)'>Zväčšiť veľkosť</a> - zväčší písmo o jednu jednotku
<a href='javascript:setFontDefault()'>Obnoviť písmo</a> - obnoví pôvodné písmo vrátane veľkosti
Konfigurácia
- var unit = 'px';
- Jednotka, v ktorej sa má meniť veľkosť písma.
- var size = 12;
- Aktuálna veľkosť písma.
- var defsize = 12;
- Implicitná veľkosť písma.
- var font = 'Arial';
- Aktuálne použité písmo.
- var deffont = 'Arial';
- Implicitne použité písmo.
- var element = document.getElementsByTagName('body');
- Elementy, v ktorých sa má meniť typ písma a jeho veľkosť.
- var cookiename = 'font';
- Prefix pre cookies; prvá cookie sa volá -family, druhá -size.
- var cookiedays = 30;
- Doba platnosti cookies v dňoch.
Download & Test
Skript je možé vyskúšať priamo na tejto stránke alebo v príklade. Zdrojový kód je šírený pod GNU/GPL a je voľne k dispozícií - font.js. Testoval som ho v prehliadačoch Opera 9, Firefox 2 a Internet Explorer 6.