Share
În acest articol vom analiza câteva din cele mai populare servicii de fonturi web, comparând caracteristicile dintre ele și vorbind despre unele steaguri roșii implicate în lucrul cu fonturi reale pe web.
Suntem o grămadă norocoasă, noi suntem web designeri ai prezentului. Designerii de web din trecut au luptat mult timp cu o selecție frustrant de mici de fonturi - fonturile sistemelor web care au fost încercate și testate pentru utilizarea pe ecran. Știi numele lor. Georgia, Times New Roman, Arial, Verdana - aproape toți îi trimit o ușoară tremurătoare pe spini.
Dar nu mai. Fontul web este aici! CSS3 a adus fonturi reale web la centura de utilitate, cu puterea @ font-face. Dar cu această nouă tehnologie vine o răspundere copleșitoare - durerea de cap care acordă licențe fonturilor pentru utilizare pe web. Din ce în ce mai multe turnătorii furnizează fonturi cu licență pentru utilizarea online, dar după aceea găzduirea fonturilor și asigurarea compatibilității între dispozitive și browsere poate fi o altă lume a durerii pe cont propriu.
Aici intră serviciile de fonturi web. Ei se ocupă de cea mai mare parte a lucrărilor de licențiere și găzduire, lăsându-vă să faceți ceea ce faceți cel mai bine - să construiți site-uri uimitoare și frumoase.
Voi vorbi despre trei dintre cele mai populare servicii de fonturi web aici. Și anume, Typekit
Fontdeck
și Fonturile Google Web.
Toate aceste servicii vă găzduesc fonturile pe serverele proprii și gestionați toate nonsensurile de licențiere care le revin - astfel încât să puteți conecta și să vă jucați fără griji.
Aceste servicii nu utilizează toate aceleași tehnici pentru încorporarea fonturilor. Fontdeck și Fonturile Google Web vă permit să utilizați o etichetă pentru a apuca fonturile direct pentru a le utiliza pe site-ul dvs., în timp ce Typekit are o abordare diferită. Typekit vă solicită să includeți un fragment de JavaScript pe site-ul dvs., care să obțină resursele necesare pentru dvs. după executare.
Utilizarea unei etichete are câteva beneficii evidente. Pentru un singur lucru, această metodă nu necesită ca utilizatorul să aibă activat JavaScript. În plus, scriptul pe care îl generează codul Typekit va avea ca rezultat cel puțin 2 solicitări HT suplimentare - una pentru alt script și o secundă pentru fișierul CSS capturat de scriptul menționat. Acesta este ceva ce Fontdeck și Google nu trebuie să sufere.
Cu toate acestea, Typekit are un avantaj semnificativ prin utilizarea unui script mai degrabă decât a CSS vechi simplu - wf- * clase.
Accentsconagua
wf- * claseCând site-ul dvs. solicită fonturi de pe serverele Typekit prin codul lor JavaScript, se întâmplă ceva ușor minunat - scriptul va adăuga clase la elementul html al site-ului dvs., în funcție de starea cererii de fonturi.
Clasele sunt wf-loading, wf-active, și wf-inactive. Ce înseamnă asta pentru noi? Ei bine, aceste clase ne pot ajuta să prevenim FOUT - blițul de text necitit care apare pe măsură ce se încarcă fonturile noastre web. Prin styling paginile noastre în mod corespunzător atunci când fonturile se încarcă, putem preveni efectul de jarring că FOUT poate avea pentru utilizatorul nostru. Verificați această pagină pentru un exemplu - în timp ce fonturile se încarcă, se aplică o clasă de încărcare wf pe eticheta html.
Folosind CSS, putem să ascundem tot conținutul și să afișăm o animație de încărcare pentru a explica utilizatorului că ceva se întâmplă. Odată ce fonturile s-au terminat de încărcat, putem scăpa treptat conținutul. Fonturile Google Web vă permit, de asemenea, să utilizați un script dacă doriți avantajul acestor clase. De fapt, scenariul din spatele acestor clase a fost un efort de colaborare între Google și Typekit.
Fiecare dintre aceste servicii adoptă un model de tarifare diferit. Fonturile Google Web sunt complet gratuite. Puteți descărca fonturile pentru utilizarea locală pe computere, ceea ce este minunat dacă încercați să construiți branding consecvent cu tipografia.
Typekit are mai multe niveluri diferite de tarifare, de la un plan gratuit la 99 USD pe an. Planul gratuit are un număr limitat de fonturi, permis doar pe un singur site web, și vă cere să afișați pe site-ul dvs. un ecuson Typekit. Toate planurile plătite vă permit să eliminați această insignă și să vă permiteți să utilizați mai multe site-uri web și să utilizați mai multe fonturi cu cât plătiți mai mult. Pentru mai multe informații despre planurile lor de tarifare, verificați site-ul lor web.
Fontdeck adoptă o metodă diferită de stabilire a prețurilor. Se percep taxe pe bază de fonturi, cu fonturi (la momentul scrierii) care variază de la 2.50 dolari pe an, dar de obicei costă aproximativ 7.50 dolari pe an.
O preocupare majoră în utilizarea fonturilor web este modul în care acestea apar în vasta varietate de dispozitive, browsere și platforme. Din păcate, nu există nicio modalitate de a ne asigura că site-urile noastre vor arăta exact la fel pe un singur dispozitiv ca pe un alt dispozitiv - știm însă că este OK. Cu toate acestea, am putea să facem o reasigurare cu privire la cât de bine vor face fonturile.
Din fericire, serviciile noastre de fonturi web știu că aceasta este o afacere mare. Toate oferă capturi de ecran pentru modul în care fonturile sunt redate în toate browserele populare, inclusiv IE6 și în sus, Google Chrome, Safari, Firefox și Opera. În general vorbind, fonturile web sunt foarte bune în toate cazurile. Unele fețe mai ușoare ar putea apărea zgâriate în Windows, dar asta e doar până la motorul de redare a fonturilor Windows - nu putem face prea multe lucruri acolo.
Un lucru care trebuie să fie conștient de utilizarea fonturilor web în site-urile dvs. este proprietatea de redare a textului CSS. Această proprietate vă permite să utilizați caracteristici OpenType, cum ar fi ligaturi și kerning, dar la un cost mare. În browserele WebKit pe distribuțiile Linux și în Chrome pe Windows cu unele fonturi, utilizarea acestei proprietăți poate duce la unele efecte secundare ciudate atunci când se ocupă cu elemente de text inline.
Având în vedere acest lucru, probabil că este o idee bună să renunțați la această proprietate (în prezent experimentală). În plus față de partea luminoasă, Firefox nu implementează proprietatea numai corect, dar are implicit ligaturi și kerning activate.
Deci, știm despre diferite servicii și diferențele dintre modul în care funcționează, precum și unele dintre steagurile roșii implicate în utilizarea fonturilor web pe site-urile noastre - dar cum de fapt începem să le folosim?
Un instrument deosebit de util pentru a obține mâinile murdare cu fonturi web este Typecast.
Typecast oferă o modalitate de a testa toate fonturile web disponibile din toate aceste servicii într-un mediu web real, unde puteți adăuga și CSS personalizat, definind lățimi pentru elemente - întregul kit și caboodle. CSS pe care Typecast le produce pentru utilizare pe site-ul dvs. este mai puțin decât dorit - dimensiunile fontului, înălțimile liniei și marginile stabilite în pixeli, nu ems. Dar este încă un instrument incredibil de util pentru a vedea cum vor arăta aceste fonturi în rețeaua web reală.
Dacă vă simțiți lipsit de inspirație pentru utilizarea fonturilor web, blogul Typekit este întotdeauna blocat cu site-uri inspirate, precum și câteva fascicole despre tehnologia din spatele fonturilor web. Există, de asemenea, site-uri web, cum ar fi Târgurile Lost World, Just My Type (de la dvs. cu adevărat) și Fonturile Good Web unde puteți vedea adevărata putere și frumusețea fonturilor reale de pe web. Site-ul lui Elliot Jay Stocks este întotdeauna un site cu adevărat inspirat, care prezintă și fonturi web. (S-ar putea să-ți spui - îmi place lucrurile astea.)
Atunci când este vorba de utilizarea serviciilor, ele nu pot fi mai simple. Fonturile Google Web sunt foarte mult doar plug and play - găsiți un font care vă place, faceți clic pe "utilizare rapidă", apoi selectați fonturile și variantele de care aveți nevoie. Veți obține un link pe care îl puteți utiliza în fișierul dvs. Web sau în fișierul dvs. CSS prin @import sau într-un fragment javascript pe care îl puteți utiliza pentru a profita de clasele "wf- *".
Fontdeck vă permite să testați fontul pe câteva computere înainte de cumpărarea acestuia pentru utilizare pe scară largă pe site-ul dvs. Web. Pur și simplu selectați fontul care vă place și vă vor oferi un link pe care îl puteți utiliza pe site-urile web. Testați-l pe câteva computere prin adăugarea adreselor lor IP pe site-ul de pe Fontdeck, apoi odată ce sunteți mulțumit de el, pur și simplu cumpărați fontul pentru utilizare nelimitată.
Typekit are un plan gratuit care vă permite să utilizați gratuit o bibliotecă de fonturi destul de extinse, cu condiția să afișați pe site-ul dvs. o insignă care să facă publicitate faptului că utilizați Tipul de tip. De fapt, nu este o insignă mică, dar dacă vrei să pleci, va trebui să plătești un plan.
Planul de portofoliu este incredibil de extins, cu puține limitări, iar prețul său este de 49,99 USD pe an, sau dacă aveți Adobe Creative Cloud, veți primi planul de portofoliu inclus. Pentru a utiliza Tipul de site pe site-ul dvs., pur și simplu creați un "kit" - o colecție de fonturi pentru utilizarea pe domeniile pe care le specificați. Copiați fragmentul de javascript pe site-urile dvs. web, adăugați câteva fonturi în kit, selectați greutățile și variantele de care aveți nevoie, apoi amintiți-vă să apăsați pe "kitul de publicare". Uneori, serverele Typekit pot dura ceva timp pentru a reflecta modificările, așa că dați-i câteva minute înainte de a vă reîmprospăta site-ul.
Din iulie 2012 Typekit au oferit îmbunatățire JavaScript.
Această nouă metodă de încorporare îmbunătățește performanța, oferă adrese relative la Protocol și încărcare asincronă opțională (oficial). Încărcarea asincronă permite fonturilor să fie trase într-o pagină, fără a bloca coada de așteptare pentru alte active în cazul apariției unor probleme.
Cu orice noroc sunteți acum înarmați cu suficiente informații despre serviciile de fonturi web pentru a vă scufunda și a vă crea propriul minte. Care dintre aceste sisteme și caracteristici preferați? Aveți experiență cu oricare dintre aceste servicii? Sfaturi și indicații pe care doriți să le distribuiți? Spuneți-ne în comentariile!
