Share
CSS 3 se află la orizont și toți suntem încântați. Datorită celor mai recente actualizări ale browserului, dezvoltatorii pot începe să lucreze cu proprietăți noi care economisesc timp, cum ar fi @ font-face. Din păcate, disponibilitatea acestor funcții este limitată la o mică parte a bazei noastre de utilizatori globale. Cel puțin pentru anul viitor, va trebui să continuăm să folosim alternativele Flash și Javascript atunci când încorporăm fonturi.
Din fericire, un nou concurent, Cufón, a făcut acest proces incredibil de simplu. Ce o face diferit? Mai degrabă decât Flash, utilizează un amestec de panza și VML pentru a reda fonturile. În doar câteva minute, voi demonstra cum să utilizați orice font doriți în aplicațiile dvs. web. Excitat?
Vizitați site-ul Cufón și faceți clic dreapta pe butonul "Descărcați" din partea de sus. Alegeți "Salvați ca" și plasați-l pe desktop.
Pentru a funcționa, trebuie să folosim utilitatea convertorului fontului pe site. Alternativ, puteți să descărcați codul sursă și să vă convertiți fonturile la nivel local. În scopul demonstrației, am ales să folosesc un font nepotrivit: "Jokerman". Notă - utilizatorii Windows: este posibil să fie necesar să copiați fontul din folderul "FONT" pe desktop pentru ca acesta să funcționeze.
Dacă doriți, încărcați și fișierele italice și îndrăznețe.
Apoi, va trebui să alegeți ce glifuri ar trebui incluse. Nu fi atât de rapid pentru a pur și simplu "CHOOSE ALL". Procedând astfel, dimensiunea fișierului JS va crește dramatic. De exemplu, probabil că nu avem nevoie de toate glifele latine; Asigurați-vă că acestea sunt lăsate necontrolate. În cazul meu, am verificat pe cele pe care le vezi mai jos.
Cufón vă permite să desemnați o adresă URL specifică pentru fișierul dvs., pentru a crește securitatea. Este extrem de important să vă asigurați că aveți privilegiile potrivite pentru a utiliza un font. REFERAȚI AICI pentru a revizui termenii. Dacă este avantajos, introduceți adresa URL a site-ului dvs. în această casetă.
Din moment ce începem doar, puteți lăsa ultimele două secțiuni la valorile implicite. Acceptați termenii și faceți clic pe "Să facem acest lucru". Apoi, veți fi prezentat cu o casetă de descărcare care vă va cere să salvați scenariul generat. Încă o dată, salvați-l pe desktop pentru a fi ușor de preluat.
Următorul pas este să ne pregătim proiectul. Creați un folder nou pe desktop, adăugați un fișier index.html și glisați cele două fișiere Javascript.
Deschideți fișierul index în editorul dvs. de cod preferat, adăugați etichetele HTML de bază și apoi trimiteți două fișiere Javascript chiar înainte de eticheta de închidere a corpului (puteți adăuga și ele la secțiunea de cap).
Acum, trebuie să decidem ce text ar trebui înlocuit. Din moment ce documentul nostru este încă necompletat, nu ezitați să-l alterați cu etichete aleatoare și text. Să încercăm să înlocuim fontul implicit în toate etichetele H1 cu Jokerman.
Când numim metoda "replace", putem adăuga un șir care conține numele etichetei pe care dorim să îl înlocuim - în cazul nostru, toate etichetele H1. Salvați fișierul și îl vizualizați în browser.
Ca întotdeauna, IE are nevoie de un pic mai mult pentru a juca frumos cu ceilalți. Dacă vizualizați această pagină în IE, veți observa o ușoară flickr / întârziere înainte ca fontul să fie redat. Pentru a remedia, pur și simplu adăugați:
Să ne imaginăm că doriți să aveți mai mult control asupra selectorului. De exemplu, probabil că nu doriți să modificați toate etichetele H1, ci doar cele din antetul documentului. Cufón nu are propriul motor selector încorporat. Această caracteristică a fost omisă să păstreze dimensiunea fișierului cât mai mică posibil. Deși acest lucru poate părea la început o cădere, este de fapt o idee grozavă. Având în vedere ubicuitatea cadrelor Javascript în ultima vreme, nu este nevoie să dublezi. Vom examina două metode pentru a viza anumite elemente.
Dacă nu veți folosi un cadru JS în proiectul dvs., pur și simplu vom folosi:
Cufon.replace (document.getElementById ( 'header') getElementsByTagName ( 'h1').);
Codul de mai sus afirmă: "Obțineți elementul care are un id de" antet ", apoi găsiți toate etichetele H1 din acest element și" le înlocuiți "cu noul nostru font.
Pentru a opri motorul selector al lui jQuery, trebuie doar să importăm jQuery înainte de Cufón.
Accentsconagua
Cufon.replace ('# header h1'); Este la fel de simplu ca asta! Rețineți că trebuie să importați jQuery înainte de scriptul dvs. Cufón pentru ca această metodă să funcționeze.
Credeți sau nu, ați terminat! Cu doar câteva linii de cod simplu, aveți libertatea de a utiliza orice font doriți! Asigurați-vă că aveți permisiune și că respectați licențele de tip "castings".
Principala preocupare din perspectiva tipului de turnătorie pare să fie că scriptul de tip tipărit generat de Cufón ar putea fi folosit pentru a inversa ingineria însăși a tiparului.
-Cameron Moll
Care sunt gandurile tale? Aveți o metodă mai bună pe care nu o cunosc?
