Ako v CSS použiť Web fonty
Ja chcem také pekné písmo aj na webke. Okrem generických fontov je tu už konečne možnosť použiť moje vlastné písmo, ktoré si z môjho webu stiahne váš prehliadač a dokáže v ňom určené objekty vykresliť. Čo je však najťažšie?
Na začiatok: najjednoduchšie je použiť instantné webové fonty od Google. Chvíľu však budete hľadať použiteľný k nášmu jazyku. Adobe má však podľa mňa menej fontov ale sú vhodné pre bežný text, nielen pre nadpisy.
Webové fonty sa už začínajú používať nielen pre nadpisy. Viete, že oveľa viac skúseností potrebujete pre výber písma pre bežný text? U nadpisov ide len o vkus.
Ako prvé je vôbec najťažšie zohnať použiteľný font. Pre naše podmienky ešte skomplikované tým, že drvivá väčšina vygúglených neobsahuje všetky naše písmená.
Ak však aj máte font, čelíte komplikáciám:
- neviete to skonvertovať do formátu pre Web Fonty,
- nejde to skonvertovať, lebo to nie je dovolené.
Ako skonvertovať? Font Squirrel
Ak už však máte, tak je dobre vedieť ako zapísať tieto fonty v CSS.
Bez prípravy si obvykle nájdete nejaký sample a skopírujete ho. Pokusmi určite prídete na funkčný kód.
Pamätáte sa na SiFR či na nahradzovanie nadpisov obrázkami?
Momentálna realita si vyžaduje, aby sa vám font podarilo skonvertovať do niekoľkých verzií formátov:
- Web Open Font Format (.woff): je úplný základ pre moderné prehliadače,
- Embedded Open Type: najmä pre IE s verziou 8 a nižšie,
- SVG fonts: nutné pre staršie iOS Safari od verzie 3.2 po 4.1,
- Truetype fonts: pre staršie verzie defaultného prehliadača v Androide.
Zaujímavý článok je aj Bulletproof font face syntax, ktorý sa už pohybuje na úrovni hackovania.
