Použitie vlastných písiem na webových stránkach
Textový obsah bol vždy dôležitým dielom webových stránok, no v prvých dňoch webu boli dizajnéri a vývojári výrazne obmedzovaní typografickou kontrolou , ktorú mali nad svojimi webovými stránkami. Toto zahŕňalo obmedzenie písma, ktoré mohli spoľahlivo používať na svojich stránkach. Pravdepodobne ste počuli termín "bezpečné webové písma", ktorý sa spomína v minulosti. Toto sa vzťahovalo na malú sadu písiem, ktoré boli pravdepodobne zahrnuté do počítača človeka, čo znamená, že ak ste na stránkach použili jedno z týchto písiem, bola to bezpečná stávka, že by sa zobrazila správne v prehliadači osoby.
Dnes majú profesionáli webu množstvo nových písiem a typových možností, s ktorými môžete pracovať. Jedným z nich je formát WOFF.
Čo je WOFF?
WOFF je skratka, ktorá znamená "Web Open Font Format". Slúži na kompresiu písma pre použitie s vlastnosťou CSS @ font-face. Je to spôsob, ako vložiť fonty do webových stránok, aby ste mohli používať špecializované písma nad rámec typických "Arial, Times New Roman, Georgia" - čo sú niektoré z vyššie uvedených webových bezpečné písma.
WOFF bola predložená W3C ako štandard pre balenie písma pre webové stránky. To sa stalo pracovným návrhom 16. novembra 2010. Dnes máme vlastne WOFF 2.0, čo zlepšuje kompresiu z prvej verzie formátu o takmer 30%. V niektorých prípadoch môžu byť tieto úspory ešte výraznejšie!
Prečo používať WOFF?
Webové písma, vrátane tých, ktoré sú dodávané vo formáte WOFF, poskytujú veľa výhod oproti iným možnostiam písma. Ako užitočné ako tie písma, ktoré sú bezpečné pre web, a je určite stále miesto pre tie fonty v našej práci, je pekné rozšíriť naše voľby a otvoriť naše typografické možnosti.
WOFF fonty majú nasledujúce výhody:
- Sú prístupnejšie ako písma ako obrázky. WOFF štýly obyčajného HTML textu s CSS, ktoré vám umožňujú prístupnosť a kontrolu dizajnu, ktoré obrázky neumožňujú.
- Súbory WOFF obsahujú typografické informácie, ako sú kontextové formuláre a postavy starého štýlu. Toto dáva vašim webovým stránkam lepšiu typografiu, pretože používate správne znaky, nie len aproximácie.
- WOFF fonty môžu pomôcť s internacionalizáciou, pretože môžete vložiť písma s znakmi z iných jazykov.
- Podobne ako všetky štýly v štýle CSS, fonty štylizované vo WOFF sú vyhľadávanejšie. Vyhľadávače nevidia text vložený do obrázka a zatiaľ čo ALT text môže pomôcť, nie je náhradou samotného textu.
- WOFF fonty sú komprimované, takže sú menšie ako ostatné typy súborov písiem. To pomôže s rýchlosťou sťahovania stránok a celkovým výkonom.
- Môžete použiť súbory WOFF na zachovanie identity značky vložením firemných písiem ako súborov WOFF.
WOFF Podpora prehliadača
WOFF má vynikajúcu podporu prehliadačov v moderných prehliadačoch vrátane:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
V súčasnej dobe je v podstate podporovaná vo všetkých oblastiach, s výnimkou všetkých verzií opery Mini.
Ako používať fonty WOFF
Aby ste mohli použiť súbor WOFF, musíte na svoj webový server nahrať súbor WOFF, dať mu meno s vlastnosťou @ font-face a potom zavolať písmo vo vašom CSS. Napríklad:
- Odošlite písmeno s názvom myWoffFont.woff do adresára / fonts webového servera.
- V súbore CSS pridajte sekciu @ font-face:
@ font-face {
písmo-rodina: myWoffFont;
formát src: url ('/ fonts / myWoffFont.woff') ('woff');
}
- Pridajte nový názov písma (myWoffFont) do zásobníka písma CSS, rovnako ako akýkoľvek iný názov písma:
p {
font-family: myWoffFont , Ženeva, Arial, Helvetica, sans-serif;
}
Kde získať fonty WOFF
Existujú dve skvelé miesta, kde nájdete veľa písiem vo formáte WOFF, ktoré sú bezplatné pre komerčné a nekomerčné použitie:
- Otvorte knižnicu písem
- Písmo Squirrel
Ak máte licenciu na používanie písma, ktoré nie je k dispozícii vo formáte WOFF, môžete použiť prekladač súborov vo formáte WOFF podobne ako na Font Squirrel. K dispozícii je tiež nástroj príkazového riadku s názvom sfnt2woff, ktorý môžete použiť na Macintosh a Windows na konverziu písma TrueType / OpenType na WOFF.
Prevezmite binárne zariadenie vhodné pre váš systém a spustite ho na príkazovom riadku (alebo termináli) a postupujte podľa pokynov.
WOFF Príklad
Tu je niekoľko príkladov súborov WOFF: Stránka WOFF na HTML5 za 24 hodín.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 7.11.17