Share
Fed-up cu Arial? Obosit de Times New Roman? Metodele de înlocuire a fonturilor s-au îmbunătățit dramatic în ultimii 2 ani, dar poate fi dificil să se rezolve diferitele metode dacă nu citiți în mod constant despre aceasta. Acest articol va discuta tehnici de înlocuire a diferitelor fonturi care sunt acolo chiar acum.
Tutorial publicatLa fiecare câteva săptămâni, revizuim câteva postări preferate ale cititorului nostru de-a lungul istoriei site-ului. Acest tutorial a fost publicat pentru prima oară în noiembrie 2010.
Vom analiza argumentele pro și contra fiecăruia, problema licențelor de fonturi și cele mai bune resurse de fonturi de pe web pentru a le putea utiliza în propriile desene web.
"De la începutul paginii, designerii au fost limitați la un număr limitat de fonturi"
Posibilitățile de proiectare pe web par să crească zi de zi. Aplicarea de tehnologii precum HTML5, CSS3 și Javascript a dus la multe proiecte interesante și inovatoare. Web-ul pare să fi parcurs un drum lung de la zilele browserului numai pentru text. În ciuda acestui fapt, există un aspect al designului web care a rămas relativ stagnat.
Tipografia și selecția fontului sunt elemente integrale ale oricărui arsenal de designeri pentru a crea aspectul și simțul unui site web. Din păcate, de la începutul paginii, designerii au fost limitați la un număr limitat de fonturi. Helvetica, Arial și Georgia sunt trei dintre cele mai puține fonturi atrăgătoare (pentru a nu uita Comic Sans) pe care designerii se pot baza în mod sigur pentru a fi afișate corect pentru majoritatea utilizatorilor de web.
Metoda tradițională pentru designeri de a eluda astfel de limitări și de a exprima creativitatea cu fonturi este de a încorpora textul în imagini - există totuși numeroase dezavantaje ale acestei metode. Mai multe probleme de accesibilitate apar, iar performanța site-ului este de asemenea afectată în mod negativ prin creșterea timpilor de încărcare.
Acest articol va discuta mai multe metode interesante de încorporare a fonturilor non-standard în paginile dvs. web fără a utiliza imagini. Vom analiza avantajele și dezavantajele fiecărei metode, problemele legate de utilizarea fonturilor și ce înseamnă cu adevărat această tehnologie pentru designerii web.
Cuf? N este o metodă incredibil de simplă și eficientă pentru încorporarea de fonturi non-standard într-o pagină web și una în care funcționalitatea acesteia nu depinde de limbile sau plug-in-urile de pe server. Cufen funcționează exclusiv pe câteva linii de cod Javascript și utilizează o combinație de VML (Vector Mark-up Language), pentru Internet Explorer și funcția Canvas HTML5 pentru a reda fonturile.
Cuf? N oferă un instrument de convertizor de fonturi pe pagina lor de pornire care vă va permite să vă convertiți fontul ales în SVG și să creați un fișier Javascript pentru a vă referi în cadrul codului HTML. Editorul Nettuts + Jeffrey Way a scris anterior un tutorial excelent pas cu pas despre cum să integreze Cufan în pagina dvs. Web.
Cuf? N este o alegere populară pentru mulți designeri web datorită numeroaselor avantaje și relativ puține negative. Nerespectarea sa pe alte limbi de scripting sau plug-in-uri înseamnă că este accesibilă pentru o audiență foarte largă și este susținută și de versiunile recente ale tuturor browserelor majore, inclusiv IE 9. De asemenea, puteți aplica direct stilul CSS la Cufen înlocuit text, inclusiv caracteristici mai noi CSS 3, cum ar fi gradienti. În ceea ce privește viteza, este mult mai rapid decât sIFR și mai puțin intensiv, dar încă nu ar trebui să fie utilizat pentru corpuri mari de text.
Există însă unele negative pentru Cufen. Încă se bazează pe funcția Javascript, pe care unii utilizatori web le-au dezactivat. Dezamăgitor Textul înlocuit nu este, de asemenea, capabil să fie selectat și prin urmare copiat și lipit.
Pro:
Contra:
"@ font-face este, în esență, soluția finală pentru fonturile de pe web."
@ font-face a primit probabil cea mai mare atenție a oricărei metode de înlocuire a fontului, dar există un motiv foarte bun pentru acest lucru. @ font-face este, în esență, soluția finală pentru fonturile de pe web și una în care toți ceilalți speră să replice înainte de a fi realizat pe deplin. @ font-face a fost de fapt inclus în caietul de sarcini CSS2, dar a luat până acum pentru adoptarea pe scară largă.
@ font-face nu folosește altă tehnologie web decât CSS pentru a implementa fonturi personalizate pe o pagină web - aceasta înseamnă că nu mai există dependență de Flash, PHP sau chiar de Javascript. Tipul real este redat atunci când se utilizează @ font-face, în locul obiectului vectorial sau imaginilor și, prin urmare, textul poate fi selectat, scalat și șters folosind CSS.
Din păcate, cum este cazul multor alte probleme legate de web, în primul rând browserele (împreună cu problemele de licențiere pe care le vom discuta mai jos) au împiedicat progresul @ font-face. Fiecare dintre browserele dominante acceptă diferite formate de fonturi. Internet Explorer folosește .EOT (Embedded Open Type) în timp ce versiunile recente de Firefox, Chrome, Safari și Opera suportă toate .ttf (True Type Format). Open Type Format este de asemenea suportat de un amestec de browsere și SVG (Scalable Vector Graphics) este necesar pentru iPhone și iPad. Acesta poate fi destul de confuz și uneori poate pune mulți oameni în încercarea de ao folosi. Din fericire, însă, există lumină la orizont. Web Open Font Format sau .WOFF este setat să devină format standard pentru fonturile web și în prezent este standardizat de către W3C. Firefox a acceptat formatul de la versiunea 3.6, Chrome de la 5.0 și a fost anunțat recent că Internet Explorer 9 acceptă și formatul. Să sperăm că Opera și Safari se vor alătura curând partidului.
Singura problemă minoră cu @ font-face este că, deoarece este prezentată ca tip real, browserele individuale și sistemele de operare o vor face ușor puțin diferit. Unele servicii de fonturi pe web, pe care le vom discuta în continuare, vizează corectarea acestor variații ușoare folosind sugestii de fonturi care netezește conturul tipului în browsere, creând un tip mai plăcut din punct de vedere estetic.
Dacă doriți mai multe informații despre cum să implementați @ font-face pe site-ul dvs., Jeffrey Way a oferit din nou un tutorial util pentru a face acest lucru.
Pro:
Contra:
Următoarea varietate de soluții se bazează pe @ font-face pentru livrarea bunurilor - fiecare dintre acestea este un "serviciu" mai mult sau mai puțin - ceea ce înseamnă: toate utilizează aceeași tehnologie de bază, dar oferă diferite biblioteci de fonturi, opțiuni de licențiere și planuri de plată; Da, cele mai multe dintre acestea necesită să plătiți pentru a le utiliza, dar șansele sunt că aceasta este calea viitorului pentru toate fonturile de pe web.
Font Squirrel este probabil cea mai populară resursă de înlocuire a fonturilor în momentul de față. Font Squirrel vă ușurează orice îngrijorare cu privire la licențele de fonturi, deoarece toate fonturile furnizate sunt disponibile în scopuri comerciale. Site-ul are sute de fonturi de ales, totul de la sans-serif la fonturi de noutate.
Așa cum am discutat mai sus, pentru a vă asigura că @ font-face funcționează în toate browserele, veți avea nevoie de mai multe formate diferite ale fontului și pentru acest font Squirrel are o soluție. Site-ul oferă @ truse tip font-face care vă oferă toate formatele de care aveți nevoie și include, de asemenea, codurile HTML și CSS necesare. Dacă nu puteți găsi setul @ font-face pentru fontul pe care doriți să-l utilizați, acestea oferă de asemenea un generator care va converti fișierul dvs. de fonturi în formatele multiple pe care le veți avea nevoie gratuit. Când utilizați generatorul, trebuie să vă asigurați că aveți licența corectă care vă permite să utilizați fontul pe site-ul dvs. Web.
Pro:
Contra:
Fontul API al Google este folosit împreună cu propriul director de fonturi, în care toate fonturile sunt open source și sunt disponibile pentru toți utilizatorii. Directorul se extinde și crește tot timpul, în prezent găzduind peste 200 de exemple.
Nu ar fi mai ușor să încorporați fonturile din director în site-ul dvs. Web. Pur și simplu trebuie să selectați fontul pe care doriți să-l utilizați, să selectați variantele de font pe care le solicitați și Google vă va oferi o singură linie de cod Javascript de care aveți nevoie. Ajustați CSS pentru a afișa fontul utilizat și sunteți gata să mergeți. Este într-adevăr atât de simplu!
Pro:
Contra:
Typekit a fost unul dintre primele servicii de abonament pentru fonturile web și rămâne extrem de popular. Typekit și alte servicii similare abordează problema licențierii fonturilor, oferind utilizatorilor acces la o gamă largă de fonturi personalizate, în schimbul unei taxe anuale de abonament. Această metodă permite turnătorilor de fonturi să primească ceva în schimbul muncii lor grele și asigură, de asemenea, împotriva pirateriei fonturilor, deoarece toate fonturile sunt găzduite centralizat pe serverele protejate de Typekit. Utilizatorii serviciului nu găzduiesc fonturile pe propriul spațiu web, ci doar leagă la ele.
Typekit a colaborat cu unele dintre cele mai mari turnătorii de fonturi din lume pentru a oferi o gamă largă și variată de fonturi pentru a le utiliza. Typekit vă oferă o mulțime de opțiuni și control asupra fonturilor pe care le utilizați. Selectați variante variate de fonturi, greutăți și glifuri de utilizat. De asemenea, puteți să creați stive CSS și să selectați fonturi alternative pentru a fi utilizate atunci când @ font-face nu este acceptată. De asemenea, va trebui să selectați anumite etichete HTML sau clase CSS pentru a aplica fontul particularizat. Odată ce sunteți mulțumit de selecțiile pe care le-ați făcut, o bucată de cod Javascript este generată pentru a fi utilizată pe site-ul dvs..
Un alt avantaj al Typekit este că urmărește să controleze variațiile în modul în care diferite browsere se ocupă de text și de fonturi folosind hinting.
Typekit oferă diferite pachete de prețuri care se potrivesc nevoilor diferite. Un pachet gratuit este disponibil, care vă oferă două fonturi de utilizat din Biblioteca Trial pe un singur site Web. Pe site-ul web sunt permise până la 25.000 de vizualizări de pagini pe lună și trebuie să afișați, de asemenea, insigna Typekit de pe site, care face legătura cu informații despre fonturile pe care le utilizați. La celălalt capăt al scalei se află pachetul Performance care vă oferă acces la întreaga gamă de fonturi disponibile pentru a fi utilizate pe o cantitate nelimitată de site-uri Web fără a limita numărul de afișări ale paginilor. Performanța oferă toate aceste caracteristici pentru o taxă anuală de abonament de 99,99 RON.
Pro:
Contra:
Fonturile populare de fonturi fonts.com au lansat de asemenea un serviciu specializat de fonturi web, care are peste 8000 de fonturi pe care le puteți utiliza în site-urile dvs. web. Similar cu Typekit, este un serviciu bazat pe abonament, cu excepția faptului că este tarifat lunar. În comparație cu Typekit, funcționează mai scump, dar există mult mai puține restricții asupra fonturilor. Pachetul gratuit se compară foarte favorabil, oferind acces nelimitat la 8000 de fonturi pentru a vă putea utiliza pe cât mai multe site-uri web pe care le doriți. Pachetul Professional vă permite, de asemenea, să descărcați și să instalați până la 50 de fonturi pe computerul dvs. pentru a vă folosi în desenele sau modelele dvs..
Fonts.com Fonturile Web se bucură de unele fonturi cu adevărat mari, ca parte a colecției sale - cum ar fi Helvetica, Univers și Franklin Gothic.
Pro:
Contra:
Renumita companie de design web Clear Left, care a lucrat pentru unele dintre cele mai mari companii din lume, sa unit cu OmniTI si a lansat Font Deck. Font Deck este un alt serviciu bazat pe abonament, cu excepția plății unei taxe anuale fiecărui font pe care îl utilizați, perfect pentru cei care doresc doar să utilizeze unul sau două fonturi pentru blogul personal.
Prețurile de litere încep de la 2,50 USD pe an pe domeniu și sunt permise vizionări nelimitate ale paginilor. Selecția întregii fonturi este, de asemenea, disponibilă pentru a încerca gratuit pentru orice perioadă de timp, deși numai douăzeci de adrese IP unice vor putea să o vizualizeze. Acest pachet gratuit vizează compensarea faptului că nu puteți descărca fonturile pe mașina dvs. locală și le puteți utiliza în timpul etapei de proiectare. Deoarece Font Deck este relativ nou la scena, alegerea fonturilor de a alege nu este în prezent foarte mare.
Pro:
Contra:
Font Spring are o abordare puțin diferită de serviciile bazate pe abonament și revine la modul tradițional de achiziționare a fonturilor. Fonturile sunt achiziționate individual și necesită să le descărcați și să găzduiți fonturile pe propriul server web. Font Spring sugerează că 99,9% din fonturile disponibile pot fi folosite cu @ font-face.
Fiecare font individual poate varia în preț și vi se solicită să plătiți o taxă suplimentară pentru licență pentru a utiliza fontul cu @ font-face. Licența @ font-face include versiunea desktop OpenType a fontului și diferitele formate pe care va trebui să îl utilizați pe web.
Există numeroase beneficii pentru utilizarea acestei metode. Dacă într-adevăr aveți inima setat pe un singur font special, ar putea fi o alternativă mai ieftină la serviciile de abonament. Puteți utiliza fontul pe cât de multe domenii doriți, atâta timp cât aveți control direct asupra acestora și nu există nici o limită a numărului de afișări de pagină.
Ca un avertisment adăugat, vi se interzice convertirea sau încorporarea fontului cu alte tehnologii, cum ar fi sIFR sau Cuf? N.
Pro:
Contra:
Acestea sunt doar câteva din serviciile de fonturi disponibile, există multe altele, cum ar fi Tipoteque și Webtype. Fiecare are propriile pozitive și negative și alegerea dvs. trebuie să se bazeze pe propriile dvs. nevoi personale. Unii se pot bucura de ușurința utilizării unui serviciu de abonament, în timp ce alții nu-i plac gândul de a renunța la un control al site-ului lor către o terță parte. Dacă acesta din urmă este cazul, este posibil să fiți mai bine să descărcați și să găzduiți propriile fonturi web cu ajutorul unor site-uri precum Font Squirrel.
Următoarele două (sIFR și FLIR) sunt, în general, de "școală veche" deoarece au o parte echitabilă de probleme, dar merită discutate și știind despre.
sIFR a fost în jur de ceva timp. Când a ieșit pentru prima dată, a oferit o metodă eficientă de încorporare a fonturilor non-standard atunci când nu exista nicio altă opțiune decât imaginile. sIFR sau Scalable Inman Flash înlocuire utilizează o combinație de Flash și Javascript pentru a modifica textul pe paginile web într-un element Flash. sIFR are multe avantaje, cum ar fi textul rămâne accesibil cititorilor de ecran și că acesta poate fi încă selectat.
Cu toate acestea, termenul "scalabil" în nume are potențialul de a crea confuzii. sIFR este scalabil în sensul că elementul Flash se măsoară la dimensiunea textului original al browserului - acest lucru îi permite să afișeze tot textul la cea mai mare dimensiune posibilă, în orice dimensiune dată. Cu toate acestea, orice text care a fost înlocuit cu un element flash nu poate fi ajustat atunci când un utilizator redimensionează textul pe o pagină; care, evident, provoacă o problemă de accesibilitate. sIFR necesită, de asemenea, ca Flash și Javascript să fie activate pe computerul unui utilizator pentru a funcționa.
Unul dintre creatorii sIFR, Mike Davidson recunoaște, de asemenea, limitările tehnologiei. Mike a declarat în mod deschis că sIFR nu ar trebui să fie utilizat pentru texte mari, deoarece are un efect vizibil asupra performanței site-ului. Mike recunoaște, de asemenea, că tehnologia sa nu este soluția finală a tipografiei pe web și se referă pur și simplu la un "stopgap".
Pro:
Contra:
Înlocuirea imaginilor FLIR sau Facelift este similară cu cea a sIFR, cu excepția faptului că utilizează Javascript și PHP pentru a genera imagini în locul Flash pentru a înlocui textul. Această metodă are avantajul evident că nu trebuie să vă petreceți timp creați imagini individuale pentru fiecare piesă de text pe care doriți să utilizați un font personalizat pentru. Dacă decideți să utilizați un alt font sau o culoare pentru textul dvs., este mult mai ușor să actualizați textul pe site-ul dvs. Web.
Din păcate, pe lângă ușurința utilizării și aspectul de economisire a timpului din FLIR, nu oferă mult îmbunătățiri față de metoda tradițională de salvare a textului ca imagini. Rezultatul final rămâne în continuare ca text redat ca o imagine în care textul nu este selectabil sau scalabil.
Pro:
Contra:
Problema cu licențe de fonturi este una în curs de desfășurare și una care a contribuit la progresul lent și adoptarea metodelor de înlocuire a fonturilor. La fel ca în cazul imaginilor, aveți nevoie de permisiunea autorului, sub forma unui Acord de licență pentru utilizatorul final (EULA), să utilizați un font pe site-ul dvs. Web. Unele licențe permit utilizarea gratuită a fontului, chiar și în scopuri comerciale, în timp ce altele pot permite utilizarea personală numai pe o mașină locală.
Atunci când utilizați una dintre metodele de înlocuire a fonturilor discutate mai sus, în mod eficient încorporați un font în site-ul dvs. sau conectați-l la unul care a fost încărcat pe serverul dvs. web și acest lucru nu este permis de multe licențe, chiar și de fonturi gratuite. Motivul pentru care mulți creatori de fonturi și turnătorii nu permit acest lucru este pentru că permite utilizatorilor site-ului acces direct la fișierul de fonturi și ei devin preocupați de faptul că fontul lor poate fi descărcat și distribuit ilegal. Această problemă a împiedicat mulți creatori de fonturi să-și facă fonturile disponibile pentru utilizarea cu metode precum @ font-face.
Prin urmare, este foarte important ca atunci când utilizați una dintre metodele discutate mai sus să vă asigurați absolut că licența de fonturi o permite.
Din fericire, această problemă nu a împiedicat complet dezvoltarea metodelor de înlocuire a fonturilor și există multe resurse disponibile pentru a vă permite să utilizați fonturi personalizate pe site-ul dvs..
"Perfecțiunea nu merită să așteptați, dacă o faceți, riscați să pierdeți oportunități noi interesante"
Am discutat mult mai sus și este clar că există multe opțiuni disponibile pentru cei care doresc să utilizeze fonturi personalizate în desenele lor de site-uri. Vestea bună este că toate aceste metode sunt disponibile pentru utilizare chiar acum. Este adevarat; niciuna dintre metode nu este perfectă, fiecare are propriile sale puncte bune și puncte proaste. @ font-face, evident, deține cea mai mare promisiune, dar va fi, probabil, câțiva ani înainte de a fi absolut bulletproof. Adevărul este că, deși situația este rareori perfectă în lumea designului web, vor exista întotdeauna compromisuri și lucruri necesare pentru implementarea noilor tehnologii. Perfecțiunea nu merită să așteptați, dacă o faceți, riscați să pierdeți ocazii noi.
Acesta este cu adevărat un moment interesant pentru designul web, și pare să existe o apreciere și o înțelegere tot mai mare a tipografiei pe web. Metodele de înlocuire a fonturilor oferă o mare oportunitate de a crea noi modele inovatoare și cred că cheia nu este de a abuza de această tehnologie. Furnizați întotdeauna măsuri de siguranță pentru situația în care lucrurile merg prost și folosiți fiecare metodă în mod sensibil (nu modificați tot textul de pe site-ul dvs.). Ia-ți timp să apreciezi și să înveți despre un tip grozav și web-ul va fi un loc mai bun pentru el.
Aveți propriile dvs. gânduri în legătură cu acest lucru? Ai o întrebare? Dacă am pierdut oricare dintre metodele dvs. preferate, postați-le mai jos în secțiunea de comentarii și vom fi sigur că le includeți în această postare!
Accentsconagua