Utilizarea fonturilor personalizate pe paginile Web
Conținutul de text a fost întotdeauna o parte importantă a site-urilor web, însă, în primele zile de pe Web, designerii și dezvoltatorii au fost foarte limitați în controlul tipografic pe care îl aveau asupra paginilor web. Aceasta a inclus o limitare a fonturilor pe care au reușit să le utilizeze în mod fiabil pe site-urile lor. Ați auzit probabil termenul "fonturi în condiții de siguranță web" menționat în trecut. Acest lucru se referea la setul mic de fonturi care era foarte probabil să fie inclus pe computerul unei persoane, ceea ce înseamnă că dacă site-ul a folosit unul dintre acele fonturi, a fost un pariu sigur că ar fi făcut corect în browserul unei persoane.
Astăzi, profesioniștii web au o serie de noi fonturi și opțiuni de tip pentru a lucra, dintre care unul este format WOFF.
Ce este WOFF?
WOFF este un acronim care înseamnă "Web Open Font Format." Este folosit pentru a comprima fonturile pentru a fi utilizate cu proprietatea font-face CSS. Este o modalitate de a încorpora fonturile în paginile web, astfel încât să puteți utiliza fonturi specializate dincolo de tipicul "Arial, Times New Roman, Georgia" - care sunt unele dintre acele fonturi menționate mai sus.
WOFF a fost trimis la W3C ca standard pentru ambalarea fonturilor pentru paginile web. A devenit un proiect de lucru pe 16 noiembrie 2010. Astăzi avem de fapt WOFF 2.0, care îmbunătățește comprimarea de la prima versiune a formatului cu aproape 30%. În unele cazuri, aceste economii pot fi și mai substanțiale!
De ce să folosiți WOFF?
Fonturile web, inclusiv cele livrate prin intermediul formularului WOFF, oferă multe avantaje față de alte opțiuni de fonturi. Cât de utile sunt acele fonturi care funcționează în condiții de siguranță web, și cu siguranță există încă un loc pentru aceste fonturi în munca noastră, este bine să extindeți și opțiunile noastre și să deschideți opțiunile tipografice.
Fonturile WOFF au următoarele avantaje:
- Ele sunt mai accesibile decât fonturile ca imagini. WOFF stiluri text simplu HTML cu CSS, oferindu-vă accesibilitatea și controlul de proiectare pe care imaginile nu le vor permite.
- Dosarele WOFF includ informații tipografice, cum ar fi formularele contextuale și figurile de stil vechi. Acest lucru oferă paginilor dvs. web o mai bună tipografie deoarece folosiți caracterele corecte, nu doar aproximări.
- Fonturile WOFF pot ajuta la internaționalizare deoarece puteți încorpora fonturile cu caractere din alte limbi.
- Ca toate textele în stil CSS, fonturile cu stil WOFF sunt mai prietenoase cu motoarele de căutare. Motoarele de căutare nu "văd" textul încorporat într-o imagine și în timp ce textul ALT poate ajuta, nu există nici un substitut pentru textul în sine.
- Fonturile WOFF sunt comprimate, astfel încât acestea sunt mai mici decât alte tipuri de fișiere de fonturi. Acest lucru va ajuta la viteza de descărcare a site-ului și la performanța generală.
- Aveți posibilitatea să utilizați fișierele WOFF pentru a păstra identitatea mărcii dvs. prin încorporarea fonturilor corporative ca fișiere WOFF.
WOFF Browser Support
WOFF are un excelent suport pentru browser în browserele moderne, incluzând:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
Este suportat în mod esențial de la bord în zilele noastre, singura excepție fiind toate versiunile de la Opera Mini.
Cum se utilizează fonturile WOFF
Pentru a utiliza un fișier WOFF, trebuie să încărcați un fișier WOFF pe serverul dvs. Web, să-i dați un nume cu proprietatea @ font-face și apoi să apelați fontul în CSS. De exemplu:
- Încărcați fontul numit myWoffFont.woff în directorul / fonts al serverului web.
- În fișierul dvs. CSS adăugați o secțiune @ font-face:
@ font-face {
font-familie: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') format ('woff');
}
- Adăugați numele noului font (myWoffFont) în stiva de fonturi CSS, așa cum ați face alt nume al fontului:
p {
font-familie: myWoffFont , Geneva, Arial, Helvetica, sans-serif;
}
Unde puteți obține fonturile WOFF
Există două locuri excelente în care puteți găsi o mulțime de fonturi WOFF gratuite pentru utilizare comercială și non-comercială:
- Deschideți Biblioteca de fonturi
- Font veveriță
Dacă aveți o licență pentru a utiliza un font care nu este disponibil într-un format WOFF, puteți folosi un creator WOFF ca la Font Squirrel pentru a vă converti fișierele de fonturi în fișiere WOFF. Există, de asemenea, un instrument de linie de comandă numit sfnt2woff pe care îl puteți utiliza pe Macintosh și Windows pentru a converti fonturile TrueType / OpenType în WOFF.
Descărcați sistemul binar corespunzător sistemului dvs. și rulați-l la linia de comandă (sau Terminal) și urmați instrucțiunile.
WOFF Exemplu
Iată câteva exemple de fișiere WOFF: Pagina WOFF pe HTML5 în 24 de ore.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 7/11/17