Zmena veľkosti a typu písma cez JavaScript

Zmena veľkosti a typu písma cez JavaScript

Písma 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.

Alternatívne verzie: Text PDF Voice
Autor: PaBi3 · Kategória: Programovanie · Dátum: 03.02.2007 11:04

Komentáre

#1 Frko Web E-mail
03.02.2007 15:07
To sa mi páči. Budem ten script používať pri výbere typu písma pri návrhu nových stránok :-)

#2 piler
03.02.2007 17:49
Je to super, len to ma jednu vadu a to to, ze pred nacitanim stranky je font povodny az potom sa z cookies vytiahne navoleny, cize je tam prebliknutie :(.

Inak by to bolo fajn.

#3 admin Web E-mail
03.02.2007 18:49
admin Keďže javascript odoslal 2 cookies, je možné kontrolovať priamo v CSS cez nejaký skriptovací jazyk, či už existujú cookie font-family alebo font-size a následne ich nastaviť.

#4 Peter Web E-mail
16.02.2007 10:00
Vsetko super super, len ako uz piler napisal... to prebliknutie.
Vdaka

#5 Jotko
26.08.2007 09:59
Skript je dobry, ale pri kliknuti na zvacsenie pisma sa meni len ten text, pred ktorym je <p> alebo <br>. Takze ked mam holy text v tabulke, tak sa velkost tohto pisma nemeni. Ako by sa dalo nadstavit, aby sa zvacsoval i tento text?
Dalo by sa nadstavit, aby velkost textu definovana ako size="1" sa zvacsovala tiez?
Diky.


#6 Majo Web E-mail
20.08.2009 19:04
[5] Jotko,

Súhlasím, neviete ako na to? Aj napriklad na h1 a podobne? Dakujem

#7 pepo Web E-mail
03.01.2015 02:23
to prebliknutie tam byt musi, nakolko je browser je asynschronny
jedine, ze by skript sa loadoval hned na zaciatku a blokoval nacitavanie ostatnych veci
bliknutie by nebolo, avsak by tam bolo zdrzanie

Osobné údaje
Captcha
Odpíšte text z obrázku. Rozlišujú sa malé a veľké písmená.
Obsah
Možnosti