Share
Credeți sau nu, există un format de imagine care este construit chiar în browserul dvs. Acesta permite ca imaginile să fie descărcate chiar înainte de a avea nevoie de ele, le face perfect pe ecrane Retina și le permite să aibă aplicate culori și efecte CSS. Ok, nu sunt absolut adevărat acolo. Nu este un format de imagine ca atare - dar restul se aplică. Utilizarea Unicode puteți crea pictograme care sunt independente de rezoluție, practic nu au timp de descărcare și pot fi, de asemenea, stil cu CSS.
În acest articol, vă voi rula prin elementele de bază, precum și unele lucruri interesante pe care le puteți face cu Unicode.
Unicode este o modalitate de a permite ca literele și semnele de punctuație din diferite limbi să fie afișate corect într-un singur document. Acest lucru este incredibil de util; înseamnă că site-ul dvs. poate fi folosit în întreaga lume și va arăta exact ceea ce ați dorit să împărtășiți - fie că se întâmplă să includeți caractere accentuate în franceză sau este scris în întregime în Kanji.
Unicode este, de asemenea, continuu să fie adăugat la; este în prezent pe versiunea 6.3, care are doar sub 110.000 de caractere. Versiunea 7 va fi lansată în cursul acestui an și va adăuga aproape 3.000 de caractere noi.
Pe lângă litere și numere, Unicode specifică și câteva simboluri și icoane. Mai recent, acestea s-au extins pentru a include icoanele Emoji pe care le-ați văzut în mesajele iOS:
Paginile HTML sunt alcătuite din secvențe de caractere Unicode, iar atunci când sunt trimise prin rețea, acestea sunt convertite în octeți. Fiecare literă sau caracter pentru fiecare limbă are un cod unic, iar acesta poate fi codificat când documentul este salvat sau partajat.
În mod ideal, această codificare folosește un sistem cunoscut sub numele de UTF-8, deoarece acesta poate codifica orice caracter Unicode, dar chiar dacă nu este cazul, orice caracter poate fi definit de un caractere numerice numerice. De exemplu, folosind ♥ va produce o inimă și puteți introduce doar acel cod direct în html ♥.
Acest număr poate fi fie un număr standard, fie echivalentul său hexazecimal. Dacă este hexazecimal, atunci numărul are nevoie de un X în fața lui, așa & # X2665; va da aceeași inimă (2665 este hex pentru 9829).
Dacă adăugați caracterul Unicode cu CSS, va trebui să utilizați valoarea hexazecimală.
Unele dintre cele mai frecvent utilizate simboluri Unicode au un nume sau o prescurtare mai memorabilă care pot fi folosite în locul acelor coduri de număr - probabil că ați folosit & (ampersand) sau < (mai puțin de), de exemplu.
Întrebare bună, dar există mai multe motive pentru care mă pot gândi:
Accentsconagua
@ Font-face icoanăPrimul dintre aceste motive nu ar trebui să necesite alte activități suplimentare. Dacă fișierul dvs. HTML este salvat ca UTF-8 și este codificat atunci când este trimis într-o rețea ca UTF-8, atunci totul ar trebui să arate excelent.
Ar trebui să. Din păcate, nu toate browserele sau dispozitivele acceptă în mod egal toate caracterele Unicode (nu te-ai aștepta ca ceva pe web să fie așa de simplu?) Caracterele precum simbolurile Emoji nu sunt acceptate pe toate dispozitivele, dar acele personaje "numite" mult mai fiabile.
Pentru a vă asigura că utilizați UTF-8 într-o pagină HTML5, adăugați la din paginile dvs. web. Dacă nu utilizați HTML5, atunci veți avea nevoie in schimb.
Al doilea motiv este că există multe caractere foarte utile, care pot fi folosite ca pictograme pe o pagină Web. De exemplu: ▶, ≡ și ♥.
Ce este minunat este faptul că, acolo unde este acceptat, nu există fișiere suplimentare pentru descărcare pentru a afișa aceste pictograme, ceea ce înseamnă că site-ul dvs. este puțin mai rapid. De asemenea, puteți adăuga culori sau o umbră a acestora cu CSS. Creșterea creativității, puteți adăuga apoi o tranziție pentru a schimba fără probleme culoarea atunci când cineva se deplasează peste pictogramă - și nu puteți face asta cu imagini.
Să spunem, de exemplu, că am vrut să includ un indicator de evaluare a stelelor pe pagina mea web. Aș putea face așa ceva:
& # X2605; & # X2605; & # X2605; & # X2606; & # X2606; Acest lucru ne-ar da ceva asemănător imaginii de mai jos:
Un exemplu de indicator de rating văzut în Firefox Ceea ce ați putea vedea ocazional, totuși, este ceva de genul:
Exemplul de evaluare vizualizat pe un BlackBerry 9000 Asta se întâmplă atunci când aceste caractere nu funcționează pe dispozitivul sau browserul utilizat. (Din fericire, aceste forme de stele sunt foarte bine susținute și am întâlnit vreodată numai telefoane vechi BlackBerry care au probleme cu ele).
Caracterul pe care îl vedeți dacă caracterul Unicode solicitat nu este acceptat va varia; s-ar putea să vedeți un dreptunghi gol sau un diamant cu un semn de întrebare.
Deci, cum puteți găsi caracterul Unicode pe care doriți să îl utilizați? Ei bine, ați putea să parcurgeți un site ca Unicodinator pentru a vedea ce este disponibil, dar îmi place să folosesc Shapecatcher - acest site incredibil vă permite să desenați pictograma și vă va sugera cele mai apropiate caractere Unicode pe care le poate găsi pentru a alege de la.
Dacă folosiți a @ Font-face pictogramă, atunci vă recomandăm să luați în considerare utilizarea unui caracter similar Unicode ca rezervă. În acest fel, într-un browser sau pe un dispozitiv care nu este compatibil @ Font-face (cum ar fi Opera Mini sau Windows Phone 7), utilizatorul ar vedea cel puțin un caracter similar:
Icoanele cu font minunat în Chrome din stânga și în partea dreaptă caracterele de bază Unicode sunt afișate în Opera Mini Mulți @ Font-face unelte implicite să utilizeze o serie de caractere Unicode care în mod deliberat nu au nici un sens sau o formă prestabilită (adesea denumită zona privată de utilizare sau caractere PUA). Căderea acestei abordări este aceea în care @ Font-face nu este acceptată, utilizatorul are o formă care nu are nicio semnificație.
Utilizarea caracterelor PUA poate provoca, de asemenea, Internet Explorer 8 Mod de compatibilitate, și lucrurile întunecate se află pe acea cale - vedeți articolul lui Jeremy Keith pentru mai multe detalii despre acest subiect.
IcoMoon este mare pentru a crea @ Font-face seturi de pictograme și vă permite să alegeți orice caracter Unicode ca bază pentru o pictogramă.
Doar fiți atent, totuși - unele browsere și dispozitive nu le plac anumite caractere Unicode folosite @ Font-face, și nu va face pictograma. S-ar putea să merite să rulați caracterul sugerat Unicode prin Unify - acest lucru vă va oferi o indicație cu privire la cât de sigur este utilizarea acelui caracter într-o @ Font-face set de pictograme.
O problemă cu utilizarea caracterelor Unicode ca schimbare de tip font-face, este că ele sunt adesea prost suportate pentru cititoarele de ecran (din nou, Unify are unele date despre acest lucru), așa că va trebui să vă gândiți cu atenție la modul în care este utilizată pictograma.
Dacă pictograma dvs. este pur decorată lângă o etichetă de text care ar fi citită de un cititor de ecran, atunci nu m-aș îngrijora prea mult. Cu toate acestea, dacă pictograma dvs. este autonomă, este posibil să doriți să adăugați o etichetă de text ascuns pentru a ajuta utilizatorii de pe ecranul cititorului. Chiar dacă caracterul Unicode este citit de cititorul de ecran, șansele sunt că nu va fi ceva asemănător cu cel pentru care îl utilizați. De exemplu, dacă utilizați & # X2261; pentru cele trei linii orizontale de navigare "Burger" pe orizontală, VoiceOver pe iOS o va citi ca fiind "identică cu".
Foarte puține fonturi vor avea caractere pentru gama completă Unicode, deci dacă alegeți un font, asigurați-vă că încercați câteva caractere care probabil veți avea nevoie.
Încerca Segoe UI Simbol sau Arial Unicode MS pentru icoane izolate. Aceste fonturi sunt probabil în mod rezonabil să fie pe un PC și pe un Mac, Lucida Grande are un număr mare de caractere Unicode. Dacă doriți să le utilizați, atunci trebuie doar să le adăugați la informațiile relevante familie de fonturi CSS, astfel încât utilizatorul va vedea caracterul Unicode în aceste fonturi, dacă acestea sunt instalate.
Ar fi util dacă a existat un mod de a detecta dacă un caracter Unicode a fost sau nu suportat înainte de al utiliza, dar nu există nici un mod garantat de a face acest lucru.
Modernizr are un pic de JavaScript pentru a încerca și pentru a testa suportul Emoji - dar acest lucru funcționează prin verificarea unui singur pixel pentru a vedea dacă există ceva. Deci, dacă caracterul pe care doriți să îl testați nu acoperă acel spațiu, chiar dacă este afișat, atunci testul vă va da rezultatul greșit. Și doar pentru că un caracter Unicode este afișat corect, nu înseamnă că celelalte 109,999 vor fi.
Pe scurt, testați-o. Și asigurați-vă că, dacă personajul nu este acceptat, utilizatorul poate înțelege în continuare ce se întâmplă.
Nu este vorba doar de pagini web pe care le puteți utiliza pe unicode - e-mailurile pot fi îmbunătățite și cu ele.
Aceasta este însă aceeași poveste; unii clienți și dispozitive de e-mail le suportă, unii nu. Campania de monitorizare a făcut unele teste care vă pot ajuta să decideți dacă trebuie să le utilizați.
Atunci când acestea sunteți susținute, ele pot fi foarte eficiente. De exemplu, dacă un caracter Emoji este utilizat într-o linie de subiect, această pictogramă colorată se poate deosebi bine într-o căsuță poștală.
Asta face doar despre această introducere la Unicode. Sper că a fost util și v-ați ajutat să înțelegeți mai bine modul în care funcționează Unicode și cum să îl utilizați.
Dacă aveți întrebări, vă rugăm să întrebați doar în secțiunea de comentarii.
