Un ghid pentru o mai bună și mai clară Icoane de interfață cu fonturile Web

Dacă sunteți familiarizați cu utilizarea formatelor de imagini bitmap (cum ar fi PNG și GIF) pentru a afișa icoane pe un site web, atunci, de asemenea, vă veți cunoaște deficiențele. În primul rând, în funcție de dimensiune și de câte informații de culoare are pictograma, o dimensiune a fișierului pictogramă ar putea fi foarte mare.

Dacă avem prea multe pictograme pentru a le introduce într-un site web, va încetini, de asemenea, performanța site-ului, deoarece mai multe cereri HTTP trebuie efectuate de browser. Deși această problemă poate fi rezolvată cu sprite CSS, dimensiunea fișierului este încă mare.

Simbolul bitmap are, de asemenea, deficiențe în flexibilitate și scalabilitate; să presupunem că trebuie să mărim sau să mărim pictograma la un anumit nivel sau să o vedem printr-o rezoluție foarte înaltă a ecranului, cum ar fi pe ecranul retinei; icoana va fi cu siguranta se întoarce în căutarea neclară.

Dacă luați în considerare unele dintre aceste aspecte de mai sus, este probabil necesar să utilizați fonturi pentru pictograme.

Utilizarea Fonturilor de Icon

Un icon font este un set de pictograme ambalate într-un font web care poate fi ulterior încorporat pe un site web folosind @ Font-face. După cum a subliniat Chris la CSS-trick, există multe avantaje ale utilizării fontului peste imagine pentru a furniza icoane;

• Font este un obiect bazat pe vector care, prin natura sa, este independent de rezoluție, astfel încât pictograma va rămâne la fel de clare în diferite rezoluții ale ecranului, inclusiv rezoluții foarte mari ale ecranului (cum ar fi nivelul retinei).
• Este, de asemenea, scalabil, permițând extinderea acesteia la multe niveluri fără a pierde calitatea și precizia.
• Deoarece pictograma este în esență un font, de asemenea, putem controla culoarea, transparența, umbra de text și chiar redimensionăm-o prin foaia de stil
• De asemenea, putem anima pictograma cu CSS3.
• Pictograma este apelată cu @ Font-face care a fost susținută de la Internet Explorer 4 (cu .eot).
• Cerere HTTP mai mică și dimensiune redusă a fișierului.

Iată câteva dintre cele mai bune fonturi gratuite pe care le găsim:

• Font Awesome
• IcoMoon
• Social Media Icons
• Zomb Fundația Icoane

Asigurați-vă că ați verificat și ați urmat licența înainte de ao încorpora în site-ul dvs. pentru a onora timpul autorului și munca grea.

@ font-face Rule

După cum am menționat, icoanele sunt încorporate folosind @ Font-face prin foaia de stil care definesc noi familie de fonturi. În următorul exemplu vom folosi simbolurile Web;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonturi / websymbols-regular-webfont.eot'); src: format url ('fonts / websymbols-regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / websymbols-regular-webfont.ttf') format ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular');  

Apoi, în documentul HTML, trebuie doar să adăugăm caracterele care reprezintă pictograma și să nu aplicați noul familie de fonturi pe larg în document, putem face mai specific adăugând o clasă suplimentară anumitor elemente pe care trebuie să le predea icoana, cum ar fi;

 
 
h
 
eu
 
j
 
A
 
eu
 
 

Înapoi la foaia de stil, definim noul familie de fonturi pentru clasa pe care tocmai am adăugat-o:

 .font-icon font-family: WebSymbolsRegular; font-size: 12pt;  

• Demo @ font-face

Utilizarea pseudo-elementelor

Dacă pictograma este tratată ca element secundar, putem livra și pictograma pseudo-element de. Presupunând că marcajul nostru HTML este după cum urmează:

 
 
Răspuns
 
Răspunde la toate
 
Redirecţiona
 
Atașament
 
Imagine
 
 

Putem face acest lucru în foaia de stil:

 ul.icon-font.pseudo li: înainte de font-family: WebSymbolsRegular; margin-dreapta: 5px;  ul.icon-font.pseudo li: nth-copil (1): înainte de conținut: "h";  ul.icon-font.pseudo li: nth-copil (2): înainte de conținut: "i";  ul.icon-font.pseudo li: nth-copil (3): înainte de conținut: "j";  ul.icon-font.pseudo li: nth-copil (4): înainte de conținut: "A";  ul.icon-font.pseudo li: nth-copil (5): înainte de conținut: "I";  

• Demo pseudo-element

Utilizare privată Unicode

Există o situație în care icoanele nu au fost încorporate în litere (A, B, C, D etc.), dar au fost încorporate în Unicode Private Use pentru a minimiza conflictul dintre personaje. La fel ca în FontAwesome, autorul a adăugat, din fericire, tot codul de caractere în foaia de stil, care arată astfel;

 .pictogramă: înainte de content: "\ f0c6";  

Dar când trebuie să încorporăm pictograma direct în HTML, ceva asemănător codului următor \ f0c6 nu va afișa pictograma punctată, deoarece nu este un caracter valid codificat în HTML.

HTML are nevoie de o marcare numerică de referință pentru a face caractere speciale. Am abordat un pic în tutorialul nostru anterior pe butoanele CSS3; acest caracter este prefixat cu o combinație a unui semn ampersand (&), un semn hash (#) si un X apoi urmată de numărul hexazecimal care reprezintă caracterul.

De exemplu, f0c6 este un număr hexazecimal, deci referința numerică a caracterelor în HTML va fi & # Xf0c6;, în FontAwesome acest cod va afișa pictograma clipului hârtiei, ca astfel;

• Demo Unicode

Subsetarea fonturilor

Este posibil ca pictogramele din colecție să nu fie toate necesare. În acest caz, putem renunța la caracterele neutilizate prin subsetarea fontului care va fi, de asemenea duce la dimensiuni reduse ale fișierelor de fonturi. Din fericire, există un instrument la îndemână de la FontSquirrel pentru a face acest lucru cu ușurință, @ generator de fonturi.

După ce ați accesat pagina respectivă și ați adăugat fontul, selectați Expert. Veți vedea mai multe opțiuni; Selectați Partajarea personalizată.

În acest exemplu, folosim fontul Sociolico pentru a afișa icoane media sociale pe site-ul nostru, dar icoanele pe care le vom avea nevoie sunt doar Dribble, Facebook și Twitter, care sunt reprezentate prin aceste caractere; d, f și T. Deci, puneți acele caractere în câmpul de introducere a caracterelor unice după cum urmează:

Și am terminat. Acum putem descărca fontul și în cazul meu dimensiunea fontului sa dovedit a fi de numai 3Kb până la 5Kb. De asemenea, amintiți-vă că singurele personaje care vor fi redate într-o icoană sunt doar d, f și t, în timp ce celelalte personaje vor face să fie doar o scrisoare obișnuită.

Gândirea finală

Un lucru pe care nu îl putem face în această practică este adăugarea unor efecte foarte detaliate, cum ar fi aceasta, la icoană.

Cu toate acestea, dacă designul nostru global nu necesită detalii la acel nivel, această abordare ar putea fi o modalitate mai bună de a servi icoane pe site-uri web. Are flexibilitate, scalabilitate, este pregătit pentru retină, cu o dimensiune foarte mică a fișierelor, ce altceva putem cere?

În cele din urmă, dacă doriți să vă aruncați mai adânc în acest subiect, mai jos am pus împreună câteva referințe utile, precum și demo și codul sursă pentru descărcare.

• Cum să vă creați propria pictogramă Webfont - WebDesignerDepot.com
• Afișarea atributelor de fonturi și date - 24 de zile
• Utilizare privată Unicode - Wikipedia

• Demo
• Descărcați sursa