Opas paremman ja terävämmän käyttöliittymän kuvakkeiden kanssa Web-fonttien avulla

Jos olet perehtynyt bittikarttakuvamuotoihin (kuten PNG ja GIF) kuvakkeiden näyttämiseen verkkosivustolla, niin olisit myös perehtynyt sen puutteisiin. Ensinnäkin kuvakkeen tiedostokoko voi olla erittäin suuri, riippuen ulottuvuudesta ja siitä, kuinka monta väritietoa kuvake on.

Jos sivustossasi on liian monta kuvaketta, se myös hidastaa verkkosivuston suorituskykyä, koska selaimen on suoritettava monia HTTP-pyyntöjä. Vaikka tämä ongelma voidaan ratkaista CSS-spriteillä, tiedoston koko on edelleen suuri.

Bittikarttakuvakkeella on myös puutteita joustavuudessa ja skaalautuvuudessa; Oletetaan, että meidän täytyy suurentaa tai suurentaa kuvaketta tiettyyn tasoon tai tarkastella sitä hyvin korkean näytön tarkkuuden kautta, kuten verkkokalvonäytössä; kuvake tulee varmasti osoittautuvat hämärtäviksi.

Jos otat joitakin edellä mainituista asioista huomioon, sinun on todennäköisesti käytettävä kuvakkeita.

Kuvakefonttien käyttäminen

kuvakkeen fontti on joukko kuvakkeita, jotka on pakattu Web-fonttiin, joka voidaan myöhemmin upottaa verkkosivustoon käyttämällä @ Font-face. Kuten Chris CSS-tempussa on huomauttanut, on monia etuja, joita fontin käyttäminen kuvien käyttämiseen on kuvakkeiden tuottamiseen;

Fontti on vektoripohjainen objekti, joka on luonteeltaan riippumaton resoluutiosta, joten kuvake pysyy terävänä eri näytön resoluutioissa, mukaan lukien erittäin korkeat näytön resoluutiot (kuten verkkokalvotaso).
Se on myös skaalautuva, joten sitä voidaan laajentaa monella tasolla menettämättä laatua ja tarkkuutta.
Koska kuvake on pohjimmiltaan fontti, voimme myös ohjata väriä, läpinäkyvyyttä, teksti-varjoa ja jopa muuttaa sen kokoa tyylisivujen kautta
Voimme myös animoida kuvakkeen CSS3: lla.
Kuvaketta kutsutaan @ Font-face sääntö, jota on tuettu jo Internet Explorer 4: stä (.eot).
Pienempi HTTP-pyyntö ja pienempi tiedostokoko.

Tässä muutamia parhaita ilmaisia kuvakkeita, joita löydämme:

Fontti mahtava
IcoMoon
Sosiaalisen median kuvakkeet
Zurb-säätiön kuvakkeet

Varmista, että olet tarkistanut ja noudattanut lisenssiä, ennen kuin upotat sen verkkosivustollesi kunnioittaaksesi tekijän aikaa ja kovaa työtä.

@ font-face sääntö

Kuten mainitsimme, kuvakkeet on upotettu @ Font-face hallita uuden tyylin määrittelysivua font-family. Seuraavassa esimerkissä käytämme Web-symboleja;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fontit / websymbols-regular-webfont.eot'); src: url ('fonts / websymbols-regular-webfont.eot? #iefix') -muodossa ('upotettu-opentype'), url ('fonts / websymbols-regular-webfont.woff') -muodossa ('woff'), URL-osoite ('fonts / websymbols-regular-webfont.ttf') -muoto ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') -muodossa ('svg');

Sitten HTML-asiakirjassa on vain lisättävä kuvaketta edustavat merkit ja sen sijaan, että sovellettaisiin uutta font-family laajasti asiakirjassa, voimme tehdä tarkemmin lisäämällä ylimääräisen luokan tietyille elementeille, joita kuvake on muutettava, kuten näin;

  h
 minä
 j
  minä

Takaisin tyylisivulle määritellään uusi font-family sillä luokalla, jonka olemme juuri lisänneet:

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

Demo @ font-face

Pseudoelementtien käyttö

Jos kuvaketta käsitellään sivuelementtinä, voimme myös toimittaa kuvakkeen läpi pseudo-elementti. Oletetaan, että HTML-merkintä on seuraava:

  Vastaa
 Vastaa kaikille
 Eteenpäin
 liite
 Kuva

Voimme tehdä sen tällä tavalla tyylisivuilla:

 ul.icon-font.pseudo li: ennen font-family: WebSymbolsRegular; marginaali-oikea: 5px;  ul.icon-font.pseudo li: n-lapsi (1): ennen sisältö: "h";  ul.icon-font.pseudo li: n-lapsi (2): ennen sisältö: "i";  ul.icon-font.pseudo li: n-lapsi (3): ennen sisältö: ";  ul.icon-font.pseudo li: n-lapsi (4): ennen sisältö: "A";  ul.icon-font.pseudo li: n-lapsi (5): ennen sisältö: "I";

Demo Pseudo-elementti

Yksityiskäyttö Unicode

On olemassa tilanne, jossa kuvakkeita ei ole upotettu kirjaimiin (A, B, C, D, jne.), Mutta ne on upotettu Unicode Private Use -käyttöön minimoimaan merkkien välisen tartunnan. Kuten FontAwesomessa, kirjoittaja on onneksi lisännyt kaikki tyylimerkissä olevat merkkikoodit, jotka näyttävät tältä;

 .icon-glass: ennen content: "f0c6";

Mutta kun meidän täytyy upottaa kuvake suoraan HTML-koodiin, jotain seuraavaa koodia \ f0c6 ei näytä terävää kuvaketta, koska se ei ole kelvollinen HTML-koodattu merkki.

HTML tarvitsee numeerisen viitemerkinnän tehdä erikoismerkkejä. Olemme katseet siitä hieman aiemmasta CSS3-painikkeistamme. tämä merkki on etukäteen yhdistetty merkki (ja&), hash-merkki (#) ja x sen jälkeen heksadesimaaliluku, joka edustaa merkkiä.

Esimerkiksi f0c6 on heksadesimaaliluku, joten HTML-numeronumero on & # Xf0c6;, FontAwesomessa tämä koodi näyttää paperiliittimen kuvake, niin kuin;

Demo Unicode

Kirjasinlajittelu

Kokoelman kuvakkeita ei ehkä tarvita. Tällöin voimme pudottaa käyttämättömät merkit liittymällä siihen myös fontin tuloksena on pienempi fonttitiedostojen koko. Onneksi FontSquirrelilla on kätevä työkalu tehdä tämä työ helposti, @ font-face generaattori.

Kun olet siirtynyt kyseiselle sivulle ja lisännyt fontin, valitse Asiantuntija. Näet lisää vaihtoehtoja; valita Mukautettu tilaus.

Tässä esimerkissä käytämme Sociolico-fonttia näyttämään sosiaalisen median kuvakkeita verkkosivuillamme, mutta tarvitsemamme kuvakkeet ovat vain Dribble, Facebook ja Twitter, joita vastaavasti edustaa nämä merkit; d, f ja T. Laita nämä merkit yksittäisten merkkien syöttökenttään seuraavasti:

Ja me olemme valmiita. Nyt voimme ladata fontin ja tapauksessani fonttikoko on osoittautunut vain 3Kb: ksi 5Kb: iin. Muista myös, että vain merkit kuvake on vain d, f ja t, kun taas muut merkit ovat vain tavallinen kirje.

Lopullinen ajatus

Yksi asia, jota emme voi tehdä tämän käytännön mukaisesti, on lisätä erittäin yksityiskohtaisia vaikutuksia kuvakkeeseen.

Jos yleinen muotoilu ei kuitenkaan edellytä yksityiskohtia tällä tasolla, tämä lähestymistapa voisi olla parempi tapa palvella kuvakkeita verkkosivuilla. Siinä on joustavuutta, skaalautuvuutta, verkkokalvonvalmistusta ja hyvin pieniä tiedostokokoja, mitä muuta voimme pyytää?

Lopuksi, jos haluat sukeltaa syvemmälle tähän aiheeseen, alla olemme koonneet muutamia hyödyllisiä viittauksia sekä demo- ja lähdekoodimme ladattavaksi.

Miten tehdä oma kuvake Webfont - WebDesignerDepot.com
Fonttien ja tietojen määritteiden näyttäminen - 24Ways
Yksityiskäyttö Unicode - Wikipedia

esittely
Lataa lähde