Korištenje prilagođenih fontova na web stranicama
Tekstni je sadržaj uvijek bio važan dio web stranica, ali u prvim danima weba dizajneri i programeri bili su strogo ograničeni tipografskom kontrolom koju su imali na svojim web stranicama. To je uključivalo ograničenje u fontovima koji su mogli pouzdano koristiti na svojim web stranicama. Vjerojatno ste čuli pojam "web sigurni fontovi" koji su spomenuti u prošlosti. To se odnosilo na mali skup fontova koji su bili vrlo vjerojatno uključeni u računalo, što znači da ako web mjesto upotrebljava neki od tih fontova, bilo bi sigurno kladiti da bi ispravno prikazivala preglednik neke osobe.
Danas web stručnjaci imaju mnoštvo novih fontova i vrsta opcija za rad, od kojih je jedan WOFF format.
Što je WOFF?
WOFF je akronim koji označava "Web Open Font Format". Koristi se za komprimiranje fontova za upotrebu s imenom CSS @ font-face. To je način ugrađivanja fontova na web stranice, tako da možete koristiti specijalizirane fontove izvan tipičnih "Arial, Times New Roman, Georgia" - koji su neki od onih gore navedenih web sigurnih fontova.
WOFF je predan W3C-u kao standard za pakiranje fontova za web stranice. Postao je radni nacrt 16. studenog 2010. Danas mi zapravo imamo WOFF 2.0, koji poboljšava kompresiju od prve verzije formata za skoro 30%. U nekim slučajevima, te uštede mogu biti čak i značajnije!
Zašto koristiti WOFF?
Web fontovi, uključujući i one isporučene putem WOFF formata, pružaju mnogo prednosti u odnosu na druge fontove. Kao korisni kao sigurni web-fontovi, i zasigurno je mjesto za te fontove u našem radu, lijepo je proširiti i odabrati naše mogućnosti i otvarati naše tipografske opcije.
WOFF fontovi imaju sljedeće prednosti:
- Oni su dostupniji od fontova kao slika. WOFF oblikuje običan HTML tekst s CSS-om, što vam daje dostupnost i kontrolu dizajna koje slike neće dopustiti.
- WOFF datoteke uključuju tipografske podatke kao što su kontekstualni oblici i stari stilski likovi. To vašoj web stranici daje bolju tipografiju jer koristite ispravne znakove, a ne samo aproksimacije.
- WOFF fontovi mogu pomoći kod internacionalizacije jer možete ugraditi fontove s likovima s drugih jezika.
- Kao i svi CSS stilski tekstovi, fontovi dizajnirani s WOFF-om više su tražilice. Tražilice ne "vide" tekst ugrađen u sliku, a ALT tekst može pomoći, nema zamjene za sam tekst.
- WOFF fontovi komprimirani su tako da su manji od ostalih vrsta font datoteka. To će vam pomoći pri brzini preuzimanja web mjesta i ukupnoj izvedbi.
- WOFF datoteke možete koristiti za očuvanje identiteta robne marke tako da ugrađujete korporacijske fontove kao WOFF datoteke.
Podrška WOFF pregledniku
WOFF ima izvrsnu podršku pregledniku u modernim preglednicima, uključujući:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
Danas je uglavnom podržan preko odbora, uz samo izuzetak svih verzija Opera Mini.
Kako koristiti WOFF krstionice
Da biste koristili WOFF datoteku, trebate prenijeti WOFF datoteku na svoj web poslužitelj, dodijeliti imenu s imenom @ font-face, a zatim nazvati font u svojem CSS-u. Na primjer:
- Prenesite font named myWoffFont.woff u direktorij / fonts web poslužitelja.
- U svojoj CSS datoteci dodajte @ font-face odjeljak:
@ font-face {
font-obitelj: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') format ('woff');
}
- Dodajte novi naziv fonta (myWoffFont) na CSS font stog, kao i bilo koji drugi naziv fonta:
p {
font-family: myWoffFont , Ženeva, Arial, Helvetica, sans-serif;
}
Gdje nabaviti WOFF krstionice
Postoje dva velika mjesta gdje možete pronaći puno WOFF fontova koji su besplatni za komercijalnu i nekomercijalnu upotrebu:
- Otvori knjižnicu fonta
- Font vjeverica
Ako imate licencu za upotrebu fonta koji nije dostupan u WOFF formatu, možete upotrijebiti WOFF kreator poput Fontovog vjeverica da biste pretvorili datoteke fontova u WOFF datoteke. Tu je i alat naredbenog retka koji se zove sfnt2woff koji možete koristiti za Macintosh i Windows za pretvaranje TrueType / OpenType fontova u WOFF.
Preuzmite binarnu koja odgovara vašem sustavu i pokrenite je u naredbenom retku (ili Terminalu) i slijedite upute.
Primjer WOFF-a
Evo nekoliko primjera WOFF datoteka: WOFF Stranica na HTML5 u 24 sata.
Izvorni članak Jennifer Krynin. Uredio Jeremy Girard dana 7/11/17