Een gids voor betere en duidelijkere gebruikersinterface-pictogrammen met weblettertypen

Als u bekend bent met het gebruik van bitmapafbeeldingen (zoals PNG en GIF) om pictogrammen op een website weer te geven, bent u ook bekend met de tekortkomingen ervan. Allereerst, afhankelijk van de dimensie en het aantal kleureninformatie dat het pictogram heeft, kan de grootte van een pictogrambestand erg groot zijn.

Als we te veel pictogrammen hebben om een website te plaatsen, kan dit ook de prestaties van de website vertragen, omdat veel HTTP-aanvragen door de browser moeten worden uitgevoerd. Hoewel dit probleem met CSS-sprite kan worden opgelost, is de bestandsgrootte nog steeds groot.

Bitmap-pictogram heeft ook tekortkomingen in flexibiliteit en schaalbaarheid; laten we zeggen dat we het pictogram moeten vergroten of vergroten tot een bepaald niveau, of het moeten bekijken via een zeer hoge schermresolutie zoals op het netvlies-display; het pictogram zal zeker blijken er wazig uit te zien.

Welnu, als u rekening houdt met een aantal van bovenstaande zaken, moet u waarschijnlijk pictogramlettertypen gebruiken.

Pictogramlettertypen gebruiken

Een pictogram lettertype is een set pictogrammen die zijn verpakt in een weblettertype dat later kan worden ingesloten op een website met @ Font-face. Zoals Chris bij CSS-trick heeft opgemerkt, zijn er veel voordelen van het gebruik van font over image om pictogrammen te leveren;

Lettertype is een op vectoren gebaseerd object dat van nature resolutieonafhankelijk is, zodat het pictogram net zo scherp blijft in verschillende schermresoluties, waaronder zeer hoge schermresoluties (zoals netvliesniveau).
Het is ook schaalbaar, waardoor het op vele niveaus kan worden vergroot zonder verlies van kwaliteit en precisie.
Omdat het pictogram in feite een lettertype is, we kunnen ook de kleur, transparantie, tekstschaduw en zelfs de grootte aanpassen via de stijlpagina
We kunnen het pictogram ook animeren met CSS3.
Het pictogram wordt gebeld met de @ Font-face regel die al vanaf Internet Explorer 4 (met .eot) is ondersteund.
Kleinere HTTP-aanvraag en lagere bestandsgrootte.

Hier zijn enkele van de beste gratis pictogramlettertypen die we kunnen vinden:

Font Awesome
IcoMoon
Social Media-pictogrammen
Zurb Stichting Icons

Zorg ervoor dat u de licentie hebt gecontroleerd en gevolgd voordat u deze in uw website insluit om de tijd en het harde werk van de auteur te honoreren.

@ font-face-regel

Zoals we al hebben vermeld, zijn de pictogrammen ingesloten met @ Font-face regel door het stijlblad dat nieuw definieert font-family. In het volgende voorbeeld zullen we de websymbolen gebruiken;

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

Vervolgens hoeven we in het HTML-document alleen de tekens toe te voegen die het pictogram vertegenwoordigen en in plaats van het nieuwe toe te passen font-family in het document, kunnen we meer specifiek doen door een extra klasse toe te voegen aan bepaalde elementen waar het pictogram in moet worden weergegeven, zoals zo;

  h
 ik
 j
 EEN
 ik

Terug naar de stijlpagina, definiëren we de nieuwe font-family voor die klas die we zojuist hebben toegevoegd:

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

Demo @ font-face

Pseudo-elementen gebruiken

Als het pictogram als het zijelement wordt behandeld, kunnen we het pictogram ook doorgeven pseudo-element. Ervan uitgaande dat onze HTML-markup als volgt is:

  Antwoord
 Allen beantwoorden
 Vooruit
 gehechtheid
 Beeld

We kunnen het op deze manier doen in de stylesheet:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; margin-right: 5px;  ul.icon-font.pseudo li: nth-child (1): before content: "h";  ul.icon-font.pseudo li: nth-child (2): before content: "i";  ul.icon-font.pseudo li: nth-child (3): before content: "j";  ul.icon-font.pseudo li: nth-child (4): before content: "A";  ul.icon-font.pseudo li: nth-child (5): before content: "I";

Demo Pseudo-element

Eigen gebruik Unicode

Er is een omstandigheid waarbij de pictogrammen niet zijn ingesloten in letters (A, B, C, D, etc.), maar zijn ingesloten in Unicode privégebruik om het botsen tussen de tekens te minimaliseren. Net als in FontAwesome heeft de auteur gelukkig alle karakterscode in de stijlpagina toegevoegd, die er zo uitziet;

 .pictogramglas: vóór content: "\ f0c6";

Maar wanneer we het pictogram rechtstreeks in de HTML moeten insluiten, lijkt het op de volgende code \ f0c6 zal het puntige pictogram niet weergeven, omdat het geen geldig teken is gecodeerd in HTML.

HTML heeft een numerieke referentieopmaak nodig om speciale karakters te maken. We hebben het een beetje besproken in onze vorige tutorial over CSS3-knoppen; dit teken wordt voorafgegaan door een combinatie van een ampersand-teken (&), een hekje (#) en een X gevolgd door het hexadecimale getal dat het teken vertegenwoordigt.

Bijvoorbeeld, de f0c6 is een hexadecimaal getal, dus de numerieke karakterreferentie in HTML zal zijn & # Xf0c6;, in FontAwesome zal die code de paperclip pictogram, zoals zo;

Demo Unicode

Fontsubset

De pictogrammen in de verzameling zijn misschien niet allemaal nodig. In dat geval kunnen we de ongebruikte tekens laten vallen door het lettertype ook in te delen resulteren in kleinere bestandsgroottes. Gelukkig is er een handige tool van FontSquirrel om dit werk eenvoudig te doen, @ font-face generator.

Nadat u naar die pagina bent gegaan en het lettertype hebt toegevoegd, selecteert u Deskundige. Je zult wat meer opties zien; kiezen Aangepaste subsetting.

In dit voorbeeld gebruiken we het Sociolico-lettertype om sociale mediapictogrammen op onze website weer te geven, maar de pictogrammen die we nodig hebben, zijn alleen Dribble, Facebook en Twitter, die respectievelijk worden vertegenwoordigd door deze tekens; d, f en t. Plaats deze tekens dus als volgt in het invoervak Enkele tekens:

En we zijn klaar. Nu kunnen we het lettertype downloaden en in mijn geval bleek de lettergrootte slechts 3Kb tot 5Kb te zijn. Onthoud ook dat de enige karakters dat zijn worden weergegeven in een pictogram zijn alleen d, f en t, terwijl de andere karakters zullen renderen om alleen een gewone letter te zijn.

Laatste gedachte

Een ding dat we niet kunnen doen aan deze praktijk is het toevoegen van zeer gedetailleerde effecten zoals deze aan het pictogram.

Als ons algehele ontwerp echter geen detail op dat niveau vereist, kan deze aanpak een betere manier zijn om pictogrammen op websites te presenteren. Het heeft flexibiliteit, schaalbaarheid, is klaar voor het netvirus met een zeer kleine bestandsgrootte, wat kunnen we anders nog vragen??

Tenslotte, als u dieper op dit onderwerp wilt duiken, hebben we hieronder enkele nuttige referenties samengesteld, evenals onze demo en broncode om te downloaden.

Hoe maak je je eigen pictogram Webfont - WebDesignerDepot.com
Weergeven van lettertypen en gegevensattributen - 24 uur
Eigen gebruik Unicode - Wikipedia

demonstratie
Download de bron