DynamickΘ fonty eot s programem WEFT

Kdy╛ d∞lßte strßnky, tak nem∙╛ete pou╛φvat zvlß╣tnφ pφsma, proto╛e na poΦφtaΦi u Φtenß°e pravd∞podobn∞ nebudou nainstalovanß. Je tedy t°eba omezit se na n∞kolik mßlo tradiΦnφch pφsem.

To je urΦitΘ omezenφ. Nabφzφ se otßzka, proΦ se nedß neznßmΘ pou╛itΘ pφsmo ve chvφli, kdy je pot°eba, odn∞kud stßhnout? Odpov∞∩ je p°ekvapivß: jde to, ale skoro nikdo to nepou╛φvß.

Microsoft kdysi dßvno p°i uvßd∞nφ prohlφ╛eΦe IE 4.0 ohlßsil mo╛nost stahovßnφ pφsem v souborech typu *.eot. Takov²m dynamick²m pφsm∙m se anglicky °φkß "embed fonts", co╛ znamenß n∞co jako "vestav∞nß pφsma". Trvalo mi asi dva roky, ne╛ jsem zjistil, jak se takovΘ soubory dajφ vytvo°it a pou╛φt. Na sprßvnou cestu m∞ navedl a╛ F≤gl (webmaster Fra╣ky), dφky!.

Co je pot°eba

CSS zßpis dynamick²ch font∙

I kdy╛ denn∞ pracujete s kaskßdov²mi styly (CSS), mo╛nß vßs zßpis dynamickΘho fontu do HTML/CSS pomocφ @font-face { } trochu p°ekvapφ. Ale je to vcelku logickΘ.

<style>

@font-face  {

    font-family: jmeno fontu;

    font-style:  normal;

    font-weight: normal;

    src: url('mujfont.eot'); }

</style>

V HTML textu se potom font zapisuje normßln∞ vlastnostφ font-family, akorßt se m∙╛e pou╛φt to moje jmeno fontu, zadanΘ v²╣e. Nap°.

Prohlφ╛eΦ potom pφsmo vykresluje podle definice ze souboru mujfont.eot. Adresa m∙╛e b²t zadßna relativn∞ (jako v tomto p°φkladu) nebo absolutn∞ (http:atd. .eot).

Soubory eot

Ty soubory *.eot si musφte vytvo°it sami prßv∞ programem WEFT. Kdy╛ si je n∞kde stßhnete, tak nep∙jdou pou╛φt, proto╛e v sob∞ obsahujφ ochranu -- omezenφ funkΦnosti jenom na urΦitou domΘnu (autorovu).

Velikost soubor∙ dynamick²ch pφsem se pohybujφ okolo patnßcti dvaceti kB. Soubory neobsahujφ v╣echna pφsmena, ale jenom ta, kterß jsou pot°eba (to se dß navolit); tak se ╣et°φ mφstem.

Ne╛ se soubor stßhne ze serveru, p°i prvnφm zobrazovßnφ strßnky se pφsmena zobrazφ p°ednastaven²m fontem.

Soubory pφsem se nedajφ kreslit, musφ se zvolit n∞jakΘ nainstalovanΘ pφsmo *.ttf (mo╛nß i jinΘ formßty) a p°evΘst jej do souboru *.eot.

WEFT

Microsoft WEFT je program prßv∞ na transformaci pφsem do soubor∙ dynamick²ch pφsem. Program se dß stßhnout ze serveru Microsoftu. Adresa je

P°i stahovßnφ se volφ, zda se mß navφc stßhnout n∞jak² p°idru╛en² databßzov² nßstroj. Jß jsem jej nestßhnul; obΦas to sice hßzφ n∞jakou hlß╣ku, ale funguje to i bez toho.

Download mß pßr mega (p°esn∞ u╛ nevφm), instalace je naprosto b∞╛nß. Program je anglicky.

Prßce s WEFTem

Chce to trochu trp∞livosti a pevnΘ nervy. Pohrajte si. Pokud ale nemßte Φas na experimenty a kletby, zkuste m∙j postup:

Pomocnß strßnka

P°ed samotnou pracφ s WEFTem je dobrΘ vytvo°it si normßlnφ html strßnku pomocna.html. Tato strßnka bude pomßhat p°i tvorb∞ dynamickΘho fontu. Nech╗ obsahuje n∞jak² text, kter² se nastavφ tφm fontem, kter² chci p°evßd∞t. Nap°φklad budu chtφt vyu╛φvat font Tahoma:

Takovß strßnka se na mΘm poΦφtaΦi zobrazφ sprßvn∞, proto╛e jß mßm Tahomu nainstalovanou. Kdo ji ale nainstalovanou nemß, tomu se zobrazφ defaultnφm pφsmem. Proto nechßme WEFT vytvo°it soubor *.eot, kter² zajistφ funkΦnost pφsma i jinde.

Prvnφ spu╣t∞nφ WEFTu

WEFT se bude sna╛it ud∞lat index nainstalovan²ch font∙. Klidn∞ mu to dovolte, mohou tam vzniknout n∞jakΘ chyby, to je jedno.

V∞t╣inou se po spu╣t∞nφ spustφ pr∙vodce (Wizard), kter² se sna╛φ pomoci s tvorbou souboru *.eot a jeho napojenφ na strßnku. DoporuΦuji pr∙vodce nepou╛φvat (storno), pr∙vodcem jsem nynφ jß.

P°ehled pφsem

WEFT si projede va╣e nainstalovanß pφsma a zobrazφ jejich seznam. Nynφ nastßvß okam╛ik pravdy: u pφsem jsou ikonky. P°φklady zobrazen²ch ikonek

Pφsmo, kterΘ u sebe mß Φervenou ikonku, nep∙jde p°evΘst do dynamickΘho fontu *.eot. Nijak. Konec. Vyberte si jinΘ pφsmo.

Ta ╛lut∞ oznaΦenß pφsma podle m²ch zku╣enostφ p°evΘst jdou, ale jsou to stejn∞ v∞t╣inou systΘmovß pφsma, kterß nenφ t°eba p°evßd∞t.

Tak╛e pokud mßte u zvolenΘho pφsma zeleno/╛lutou, m∙╛ete pokraΦovat.

P°idßnφ pomocnΘ strßnky

Tools > Add Web Pages. Pomocφ tlaΦφtka s t°emi teΦkami p°idejte do seznamu tu pomocnou strßnku pomocna.html

Anal²za font∙ pomocnΘ strßnky

P°φkaz Tools > Analyze Web Pages si projde tu pomocnou strßnku, a hledß v nφ fonty.

Volba font∙ a znak∙

Tools > Fonts to Embed zobrazφ fonty pou╛itΘ ve strßnce a jejich vlastnosti.

Ve normßlnφm p°φpad∞ by m∞l seznam font∙ obsahovat jenom jeden (t°eba tu Tahomu). P°ehled ukazuje, kterΘ pou╛itΘ fonty se dajφ p°evΘst. TlaΦφtkem Don't embed se dajφ n∞kterΘ fonty vypnout, a tak se nebudou p°evßd∞t do *.eot. Nap°φklad nemß smysl p°evßd∞t Times New Roman, proto╛e ten je v╣ude.

S volbou Language (jazyk) experimentujte jedin∞ v p°φpad∞ chyb. Pro Φeskß pφsma se nastavuje automaticky Latin Extended-B a je to tak asi dob°e.

Subsetting = sada pφsem

Nep°i╣el jsem na to, jak funguje v²b∞r Subsetting, hßzelo mi to stßle stejnΘ v²sledky.

Co ale funguje z°ejm∞, je tlaΦφtko Subset - vybrat sadu znak∙. Spou╣tφ to Subset Editor.

╚ern∞ jsou zobrazena pφsmena, kterß budou v dynamickΘm fontu zahrnuta, ╣ed∞ se vykreslujφ znaky, kterΘ tam nebudou (proto╛e v pomocnΘ strßnce nejsou, a tak by jenom zabφraly mφsto).

Kliknutφm na konkrΘtnφ znak se dß znak vypφnat a zapφnat. Dole se v °ßdku ukazuje v²b∞r pφsma, znaky se dajφ p°idßvat i sem. Vpravo naho°e si vyberte jazykovΘ podmno╛iny znak∙, ze kter²ch se dß takΘ vybφrat.

Vybranou skupinu pφsem si m∙╛ete ulo╛it. Nap°φklad doporuΦuji ulo╛it si v╣echny ΦeskΘ znaky, abyste je nemuseli poka╛dΘ znovu klikat.

Pokud se ukazujφ ΦtvereΦky mφsto pφsmenek: zkuste WEFT restartovat, nebo si v dialogu Fonts to embed pohrajte s volbou Language. ╚tvereΦky se budou ukazovat v╛dy, pokud pracujete s needitovateln²m fontem (Φervenß ikonka).

Vytvo°enφ dynamickΘho fontu

P°φkaz WEFTu Tools > Create Font Objects. DialogovΘ okno se ptß na pßr v∞cφ:

Enter the location... se ptß jenom na to, kam se ulo╛φ eot soubor. To nenφ tak d∙le╛itΘ. D∙le╛itΘ je a╛ dal╣φ nastavenφ -- omezenφ na domΘnu.

Omezenφ na domΘnu

Dß se navolit (dokonce musφ), ╛e soubor dynamickΘho fontu bude fungovat jenom na strßnkßch urΦitΘ domΘny nebo na Φßsti disku. Je to to okΘnko Font objects may only be used from pages under this root:

P°φklad: moje strßnky mßm doma na disku ve slo╛ce C:\www. Aby mi tam fungovaly dynamickΘ fonty, mohl jsem zadat file:///c:\www\ nebo jenom file:///c:\ (pak by to fungovalo na celΘm disku. Zßrove≥ jsem nechal font fungovat na svΘm webu (dusan.pc-slany.cz).

Dal╣φ nastavenφ nejsou d∙le╛itß

DoporuΦuji nechat si ukßzat zßpis CSS a zkopφrovat si ho. Nechte si to vygenerovat s relativnφ adresou.

P°φkaz Tools > Publish... se sna╛φ zm∞n∞nΘ soubory odeslat na server. Pova╛uji to za nebezpeΦnou hru; lΘpe je odladit to na disku a na server to poslat klasicky.

Vlo╛enφ CSS do strßnek

Nynφ na disku vznikl soubor s p°φponou eot. Mn∞ se pojmenoval TAHOMA0.eot, proto╛e jsem pracoval s fontem Tahoma. Ten eot soubor se musφ poslat na server. Ale jmΘno a umφst∞nφ toho souboru se dß libovoln∞ zm∞nit, t°eba na fonty/mujfont.eot. D∙le╛itΘ je, co se napφ╣e do CSS deklarace.

<style>

@font-face  {

    font-family: Tahoma;

    font-style:  normal;

    font-weight: normal;

    src: url('fonty/mujfont.eot'); }

</style>

JmΘno fontu je volitelnΘ, je ale dobrΘ nechßvat p∙vodnφ jmΘno (Tahoma). Je toti╛ mo╛nΘ, ╛e se na u╛ivatelov∞ poΦφtaΦi to p∙vodnφ pφsmo nachßzφ pod stejn²m jmΘnem. Pak nebude t°eba stahovat dynamickou nßhradu.

Pou╛itφ fontu v textu

Potom, co je ve stylopisu to font-face{}, pou╛φvß se dynamick² font klasicky jako jak²koliv jin² font. Prost∞ CSS vlastnostφ font-family. Nap°.:

nebo t°eba stylopisem °φci, ╛e v╣echny nadpisy prvnφ ·rovn∞ (h1) budou tφm fontem:

Podpora

Uveden² postup vlo╛enφ dynamickΘho pφsma funguje pouze v Internet Exploreru od ΦtvrtΘ verze. Netscape pr² takΘ dokß╛e n∞jak naΦφtat fonty, ale ned∞lß to pomocφ eot (prost∞ takΘ po svΘm). Vφc o tom nevφm.

Zßv∞rem

Na tomto mφst∞ musφm p°ipomenout svoji hlavnφ zßsadu: nenφ d∙le╛itß forma, ale obsah. Rad∞ji p°em²╣lejte o tom, co napsat, ne╛ jak²m to bude fontem. TakΘ pamatujte, ╛e mΘn∞ je n∞kdy vφce; je zajφmav² nßpad dßt si na strßnku gotick² nadpis, ale je hloupost tφm neΦiteln²m ╣vabachem psßt Φlßnky.

Vcelku velk²m ·skalφm je fakt, ╛e spousta zajφmav²ch Φesk²ch pφsem prost∞ nejde transformovat do eot. Po╣lete mi prosφm odkazy na sta╛enφ font∙, u kter²ch to jde. Dφky.