Share
În ultimii cinci ani, tipografia de pe web a luat destul de mult față (fetelor de rău). Obișnuia să fie că designerii web erau constrânși să folosească numai fonturi care să funcționeze în condiții de siguranță; fonturile de sistem disponibile pe computerele tuturor utilizatorilor. După cum vă puteți imagina (sau experimentați prima mana), acest lucru a fost frustrant pentru noi ciudat de tip, dar ne-am ocupat de ea. Cu toate acestea, într-un mod ciudat a fost un fel de frumos pentru că aveați un set limitat de fonturi de ales, deci timpul petrecut pentru alegerea fontului perfect a fost minim (nu mă plâng). Acum, însă, un font specific aspectului și simțului pe care doriți să-l realizați este posibil și companiile își pot proiecta acum limbajul vizual al mărcii prin tipografie.
Deci, de-a lungul a venit câteva metode de servire tip la site-urile noastre, cel mai folosit fiind @ font-face. Această regulă CSS ne permite să descărcăm fonturile de pe un server și să le folosim pe paginile noastre uimitoare. La început, suportul browser-ului a fost minim, dar este acum acceptat pe scară largă. Singura excepție notabilă fiind Opera Mini (băieți).
@ font-face este o regulă CSS care specifică numele fontului, locația acestuia și greutatea fontului. În exemplul simplificat de mai jos, fontul este stocat pe font-face.com, iar calea specifică este definită. Ar putea arata cam asa:
Accentsconagua
@ font-face font-family: "DeliciousRoman"; src: url ('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf'); font-weight: 400; Puteți vedea că numele fontului este setat la "DeliciousRoman". Acesta este numele fontului care va fi apoi referit în stiva noastră de fonturi CSS, împreună cu fonturile alternative în cazul în care fontul nu se încarcă:
.exemplu font-family: 'DeliciousRoman', Arial, sans-serif;
Cu toate acestea, lucrurile nu sunt chiar atât de simple. Întrucât browserele diferite necesită formate de fonturi diferite, trebuie să fim siguri că oferim toate opțiunile necesare.
Iată o listă de browsere împreună cu tipurile de fișiere pe care le suportă:
Au existat mai multe convenții diferite în cadrul @ font-face pentru a aborda problema compatibilității browserului. Este bine să știți cum a evoluat @ font-face, iar următoarea istorie rapidă oferă legături către o cantitate solidă de citire pe subiect.
Paul Irish a venit inițial cu sintaxa Bulletproof @ font-face în 2009. De-a lungul anilor, câteva hacks au apărut pentru a aborda problema compatibilității browser-ului, cea mai controversată fiind hack-ul smiley face.
O altă versiune a apărut numită Sintaxa Mo 'Bulletproofer de Richard Fink, care abordează problemele legate de fonturi care au apărut în Android.
În sfârșit, am ajuns la sintaxa FontSpring @ font-face. Această abordare simplifică o mare parte a limbii și arată astfel:
@ font-face font-family: "DeliciousRoman"; src: url ('fonts / DeliciousRoman-webfont.eot? #iefix') format (embedded-opentype), url ('fonts / DeliciousRoman-webfont.woff' DeliciousRoman-webfont.ttf 'format (' truetype '), url (' fonts / DeliciousRoman-webfont.svg # svgDeliciousRoman ') format (' svg '); În exemplul de mai sus, puteți vedea că fonturile sunt găzduite de sine și sunt stocate pe server într-un folder denumit "fonturi".
Font Squirrel (și alți câțiva) oferă un generator webfont la îndemână, care va converti orice font într-un set de fișiere web pentru încorporare. Inclus în kit veți găsi toate fișierele de fonturi necesare, sintaxa specifică @ font-face CSS și un demo HTML. Apoi puteți plasa fișierele de fonturi direct pe serverul dvs. și puteți ajusta calea în CSS font-face.
Notă: Atenție corectă, totuși, asigurați-vă că aveți suficiente drepturi de utilizare a fonturilor pe care le utilizați prin intermediul generatorului și care sunt utilizate pe site-ul dvs..
În funcție de tipul de auto-gazdă sau de utilizarea unui serviciu de tip font, cum ar fi Typekit (mai multe despre aceasta mai târziu), CSS ar arăta puțin diferit. De exemplu, cu un serviciu cum ar fi Typekit, creați, bine, "truse" de fonturi care conțin toate fonturile pe care le veți utiliza pentru fiecare site specific. Pentru fiecare kit pe care îl creați, vă este oferit un fragment JavaScript care să fie plasat în din documentul HTML. Acest fragment încorporează regulile corecte @ font-face pentru browserul respectiv.
Pentru mai multe informații despre motivul pentru care TypeKit utilizează JavaScript, citiți mai bine încărcarea fontului web cu JavaScript.
În setările kitului ofertele fonts.com veți găsi trei opțiuni de publicare diferite cu calitatea de membru premium. În plus față de o opțiune de javascript similară cu Typekit, ele oferă de asemenea o opțiune non-JavaScript care face legătura cu o foaie de stil servită și cu o opțiune găzduită în mod automat. În funcție de ceea ce alegeți, evident că CSS va arăta puțin diferit.
După cum vă puteți imagina, licențierea fonturilor devine o problemă mare atunci când utilizați fonturile pe web. Utilizarea pe scară largă a fontului @ a adus destul de multă explozie de fonturi gratuite, dintre care unele sunt foarte bune, dintre care unele nu sunt. Font Squirrel, Fontex și DaFont sunt câteva dintre cele mai cunoscute opțiuni pentru fonturi gratuite. Lost Type Coop este un alt loc minunat pentru a ridica fonturi, donații acceptate. Google Fonts oferă, de asemenea, o selecție uriașă de fonturi gratuite, deși, în opinia mea, unele sunt de slabă calitate.
Industria de găzduire a fonturilor a crescut de-a lungul ultimilor ani. Gazduirea de fonturi vă permite să acordați licență unor fonturi preferate - și, în multe cazuri, o calitate mai bună decât fonturile gratuite - pentru a fi utilizate pe web. Typekit a fost unul dintre primii jucători mari pe această piață și are o selecție foarte bună de fonturi. De-a lungul timpului au adăugat câteva fonturi mai cunoscute precum Futura și Meta și au făcut mai multe fonturi bine cunoscute în lumea web.
Fonts.com oferă licențierea pentru biblioteca sa de peste 150.000 de fonturi, care conține unele dintre cele mai populare fonturi din lume, cum ar fi Avenir, Frutiger, Univers, și Din pentru a numi câteva. Acest serviciu are câteva caracteristici unice pe care îmi place foarte mult: în funcție de nivelul de membru pe care îl ai, acesta integrează SkyFonts, care vă permite în esență să "închiriați" fonturile pentru o perioadă de timp, cel mai adesea într-o perioadă de unu sau treizeci de zile. Acest lucru vă permite să utilizați fontul în aplicațiile desktop pentru scopuri mockup. În plus, cu un membru premium, puteți descărca kitul de fonturi și puteți găzdui propriile fonturi, sporind timpul de încărcare.
Unul dintre serviciile de brand nou care au provocat o agitație recentă este lansarea HF & J a tipografiei cloud. HF & J este larg considerată a fi autoritatea de tipografie și fonturile lor trăiesc până la acea reputație. O ofertă web de la acești semeni a fost mult așteptată, deoarece au reproiectat fiecare dintre fonturile lor pentru ecran. Au ridicat destul de mult barul, făcând 9pt. Gotham citit pe ecran. Este chiar uimitor.
Acestea au o interfață minunată cu caracteristici ucigașe, cum ar fi selectarea numai a caracterelor dintr-un font de care aveți nevoie, ceea ce la rândul lor economisește spațiu și crește timpul de încărcare. În mod cert merită verificat.
Structura de stabilire a prețurilor pentru serviciile de găzduire a fonturilor variază, dar majoritatea se bazează pe vizualizări de pagină pentru fiecare site pe care îl utilizați. În plus, multe servicii, cum ar fi fonts.com, au diferite niveluri de prețuri care oferă diferite add-on-uri, cum ar fi fonturi desktop, fonturi machete și opțiuni de găzduire. Cel mai bine este să vedeți ce este disponibil și să alegeți serviciul și planul care se potrivește nevoilor dvs..
Deci, este mai bine să folosiți un serviciu de găzduire a fonturilor sau să vă autostrăziți? Pai depinde. Iată câteva avantaje ale fiecăruia:
Serviciul de gazduire (cum ar fi TypeKit, Fonts.com, HF & J)
Gazduire de sine
Trebuie remarcat faptul că trebuie să fii conștient de numărul de fonturi pe care le folosești. Când vine vorba de performanță, greutăți multiple ale aceluiași font înseamnă că încărcați un alt font întreg, deci aveți grijă ca mai multe fonturi pe care le utilizați, cu atât mai mult timp de încărcare. Veți seta câteva alarme pe TypeKit odată ce kit-ul dvs. este de peste 500k, dar mai puțin este mai mult în acest caz.
Bine, acum esti educat pe elementele de baza ale @ font-face si multe moduri in care poate fi folosit! Asigurați-vă că țineți pasul cu noile instrumente și metode de integrare a fonturilor pe web - ca și cu orice pe web, se schimbă rapid!
