Korišćenje prilagođenih fontova na veb stranicama
Sadržaj teksta je oduvek bio važan deo web stranica, ali su u ranim danima Veba dizajneri i programeri bili strogo ograničeni u tipografskoj kontroli koju su imali na svojim web stranicama. Ovo uključuje ograničenje fontova koje su mogli pouzdano koristiti na svojim sajtovima. Verovatno ste čuli izraz "web bezbedni fontovi" pomenuti u prošlosti. Ovo se odnosilo na mali skup fontova koji su verovatno bili uključeni na računar osobe, što znači da, ako ste sajt koristili jedan od tih fontova, bilo je sigurno opklada da će se ispravno prikazati na pretraživaču osobe.
Danas web profesionalci imaju niz novih fontova i opcija tipa za rad, od kojih je jedan WOFF format.
Šta je WOFF?
WOFF je akronim koji označava "Web Open Font Format". Koristi se za kompresiranje fontova za korištenje s CSS @ font-face svojstvom. To je način da ugradite fontove na web stranice tako da možete koristiti specijalizirane fontove izvan tipičnog "Arial, Times New Roman, Georgia" - koji su neki od navedenih web sigurnih fontova.
WOFF je dostavljen W3C kao standard za pakovanje fontova za web stranice. On je postao radni nacrt 16. novembra 2010. Danas imamo zapravo WOFF 2.0, što poboljšava kompresiju iz prve verzije formata za skoro 30%. U nekim slučajevima, ove uštede mogu biti još suštinski!
Zašto koristiti WOFF?
Web fontovi, uključujući one koji se isporučuju preko WOFF formata, pružaju mnoge prednosti u odnosu na druge izbore fontova. Koristan kao i oni web sigurni fontovi, a sigurno je i dalje mjesto za ove fontove u našem radu, lepo je i proširiti naše izbore i otvoriti naše tipografske opcije.
WOFF fontovi imaju sledeće prednosti:
- Oni su pristupačniji od fontova kao slike. WOFF stilovi obični HTML tekst sa CSS-om, omogućavaju vam pristupačnost i kontrolu dizajna koju slike ne dozvoljavaju.
- WOFF fajlovi uključuju tipografske informacije kao što su kontekstualne forme i stare figure. To daje vašim web stranama bolju tipografiju jer koristite ispravne znakove, a ne samo aproksimacije.
- WOFF fontovi mogu pomoći u internacionalizaciji jer možete ugraditi fontove sa likovima sa drugih jezika.
- Kao i svi stilovi CSS-a, fontovi stvoreni WOFF-om su više ljubazni prema pretraživačima. Pretraživači ne vide "tekst" koji je ugrađen u sliku, a dok ALT tekst može pomoći, ne postoji zamena za sam tekst.
- WOFF fontovi su komprimovani, tako da su manji od drugih vrsta datoteka. Ovo će pomoći pri brzini prenosa sajta i ukupnim performansama.
- WOFF datoteke možete koristiti za očuvanje identiteta vašeg brenda tako što ćete ugraditi korporativne fontove kao WOFF datoteke.
WOFF Browser podrška
WOFF ima odličnu podršku pretraživaču u modernim pretraživačima, uključujući:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
U suštini je podržana u celoj ploči ovih dana, sa izuzetnim izuzetkom sve verzije Opera Mini.
Kako koristiti WOFF fontove
Da biste koristili WOFF datoteku, morate uploadovati WOFF datoteku na svoj web server, dati ime imenom @ font-face svojstvo, a zatim pozvati font u svoj CSS. Na primjer:
- Postavite font pod nazivom myWoffFont.woff u / fonts direktorijum na web serveru.
- U svojoj CSS datoteki dodajte odjeljak @ font-face:
@ font-face {
font-family: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') format ('woff');
}
- Dodajte novo ime fonta (myWoffFont) u vaš CSS font stack, kao i bilo koji drugi font ime:
p {
font-family: myWoffFont , Ženeva, Arial, Helvetica, sans-serif;
}
Gdje dobiti WOFF Fontove
Postoje dva izvrsna mesta na kojima možete naći mnoge WOFF fontove koji su besplatni za komercijalnu i nekomercijalnu upotrebu:
- Otvorite biblioteku fontova
- Font Veverica
Ako imate licencu za korištenje fonta koji nije dostupan u WOFF formatu, možete koristiti WOFF kreatora kao u Font Squirrel-u za pretvaranje datoteka datoteka u WOFF datoteke. Postoji i alatka za komandnu liniju zvanu sfnt2woff koju možete koristiti na Macintosh i Windowsu za pretvaranje TrueType / OpenType fontova u WOFF.
Preuzmite binarni sistem koji odgovara vašem sistemu i pokrenite ga na komandnoj liniji (ili terminalu) i pratite uputstva.
Primer WOFF-a
Evo nekoliko primera WOFF datoteka: WOFF stranica na HTML5 za 24 sata.
Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 11.7.17