Útmutató a jobb és félelmetesebb felhasználói felület ikonokhoz a webes betűtípusokkal

Ha ismeri a bittérképes képformátumok (például a PNG és a GIF) használatát a webhelyek ikonjainak megjelenítéséhez, akkor ismeri a hiányosságokat is. Először is, attól függően, hogy mekkora-e a méret és mennyi színinformáció van, az ikonfájl mérete nagyon nagy lehet.

Ha túl sok ikonra van szükségünk ahhoz, hogy egy webhelyet elhelyezhessünk, akkor ez potenciálisan lelassíthatja a webhely teljesítményét, mivel sok HTTP kérést a böngészőnek kell elvégeznie. Bár ez a probléma megoldható a CSS sprite segítségével, a fájl mérete még mindig nagy.

A bittérkép ikonja is hiányosságokkal rendelkezik a rugalmasság és a méretezhetőség terén; Tegyük fel, hogy nagyítani vagy nagyítani kell az ikont egy bizonyos szintre, vagy meg kell nézni egy nagyon magas képernyőfelbontásban, például a retina kijelzőn; az ikon határozottan kiderül, hogy elmosódott.

Nos, ha figyelembe vesszük a fenti kérdéseket, valószínűleg ikont betűtípusokat kell használni.

Ikon betűtípusok használata

egy ikon betűtípus egy olyan web betűkészletet tartalmazó csomagkészlet, amelyet később be lehet ágyazni egy weboldalra @ Font-face. Ahogy Chris rámutatott a CSS-trickre, számos előnye van annak, hogy a betűkészletet a kép fölé helyezi az ikonok megjelenítéséhez;

• A betűtípus egy vektoralapú objektum, amely jellegéből adódóan felbontástól független, így az ikon továbbra is éles lesz a különböző képernyőfelbontásokban, beleértve a nagyon magas képernyőfelbontásokat (pl. Retina-szint).
• Ez is méretezhető, lehetővé téve, hogy sok szinten növelje a minőséget és a pontosságot.
• Mivel az ikon alapvetően betűtípus, a színt, az átláthatóságot, a szöveg-árnyékot és a stíluslapon átméretezhetjük
• Az ikont is animálhatjuk CSS3-mal.
• Az ikont az @ Font-face szabály, amelyet már az Internet Explorer 4-ből támogattak (.eot).
• Kisebb HTTP kérés és alacsonyabb fájlméret.

Íme néhány a legjobb ingyenes betűtípusok közül:

• Betűtípus Awesome
• IcoMoon
• Szociális média ikonok
• Zurb Alapítvány ikonok

Győződjön meg róla, hogy ellenőrizte és követte a licencet, mielőtt beillesztette volna a webhelyére, hogy tiszteletben tartsa a szerző idejét és kemény munkáját.

@ font-face szabály

Mint már említettük, az ikonok beágyazva vannak @ Font-face szabályozza a stíluslapot, amely meghatározza az új betűtípus család. A következő példában a webes szimbólumokat fogjuk használni;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); src: url ('fonts / websymbols-regular-webfont.eot? #iefix') formátum ("beágyazott opentype"), url ('fonts / websymbols-regular-webfont.woff') formátum ('woff'), url ('fonts / websymbols-regular-webfont.ttf') formátum ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') formátum ('svg');  

Ezután a HTML dokumentumban csak az ikont ábrázoló karaktereket kell hozzáadnunk, és nem az új alkalmazást betűtípus család széles körben a dokumentumban, pontosabban úgy tehetünk, hogy egy bizonyos osztályhoz hozzáadunk egy extra osztályt, amelyre az ikont be kell nyújtani;

 
 
h
 
én
 
j
 
A
 
én
 
 

Visszatérve a stíluslapra, definiáljuk az újat betűtípus család azon osztályhoz, amelyet éppen most vettünk fel:

 .icon-font font-family: WebSymbolsRegular; betűméret: 12pt;  

• Demo @ betűtípus

Pszeudo-elemek használata

Ha az ikont oldalelemként kezeljük, akkor az ikont is átadhatjuk pszeudoelem. Feltételezve, hogy a HTML-jelölés a következő:

 
 
Válasz
 
Válasz mindenkinek
 
Előre
 
Attachment
 
Kép
 
 

Ily módon tehetjük meg a stíluslapon:

 ul.icon-font.pseudo li: font-family: WebSymbolsRegular; margin-right: 5px;  ul.icon-font.pseudo li: n. gyermek (1): tartalom: "h előtt;  ul.icon-font.pseudo li: n-gyermek (2): tartalom: "i előtt;  ul.icon-font.pseudo li: n. gyermek (3): tartalom: "j előtt;  ul.icon-font.pseudo li: nth-gyermek (4): tartalom: "A előtt;  ul.icon-font.pseudo li: n. gyermek (5): tartalom: "I előtt;  

• Demo Pseudo-elem

Privát használat Unicode

Olyan körülmény van, amikor az ikonok nem lettek beágyazva betűkbe (A, B, C, D, stb.), De beágyazódtak az Unicode Private Use alkalmazásba, hogy minimálisra csökkentsék a karakterek közötti ütközést. A FontAwesome-hoz hasonlóan a szerző szerencsére hozzáadta az összes karakterkódot a stíluslaphoz, ami így néz ki;

 .ikon-üveg: tartalom: "f0c6" előtt;  

De amikor be kell ágyaznunk az ikont közvetlenül a HTML-be, valami ilyesmi, mint a következő kód \ f0c6 nem jelzi a hegyes ikont, mivel nem érvényes HTML-kódban kódolt karakter.

A HTML-nek numerikus referencia jelölést kell használnia különleges karakterek megjelenítéséhez. A CSS3 gombokról szóló korábbi bemutatónk egy kicsit foglalkozott vele; ez a karakter a jel és a jel kombinációját tartalmazza (&), hash jel (#) és egy x majd követi a karaktert reprezentáló hexadecimális szám.

Például a f0c6 egy hexadecimális szám, így a numerikus karakter hivatkozás a HTML-ben lesz & # Xf0c6;, a FontAwesome-ban ez a kód a gemkapocs ikonra, úgy tetszik;

• Demó Unicode

Betűtípus-előfizetés

Lehet, hogy a gyűjteményben található ikonok nem szükségesek. Ebben az esetben a fel nem használt karaktereket le is vonhatjuk a betűtípussal alacsonyabb betűméreteket eredményez. Szerencsére van egy praktikus eszköz a FontSquirrel-től, hogy ezt a munkát könnyen elvégezhesse, @ font-face generátor.

Miután elmentünk az oldalra, és hozzáadta a betűtípust, válassza a lehetőséget Szakértő. Néhány további opciót láthat; választ Egyéni előfizetés.

Ebben a példában a Sociolico betűtípust használjuk a közösségi média ikonok megjelenítéséhez honlapunkon, de a szükséges ikonok csak a Dribble, a Facebook és a Twitter, amelyek ezeket a karaktereket képviselik; d, f és t. Tehát tegye ezeket a karaktereket az Egy karakterek beviteli mezőbe a következőképpen:

És mi végeztünk. Most letölthetjük a betűtípust, és esetemben a betűméret csak 3Kb-tól 5Kb-ig terjed. Ne feledje, hogy az egyetlen karakter ikon lesz csak d, f és t, míg a többi karakter csak rendes levél lesz.

Végső gondolat

Az egyik dolog, amit nem tehetünk ezen a gyakorlaton, az ehhez hasonló rendkívül részletes hatásokat adhat az ikonhoz.

Ha azonban az általános tervünk nem igényel részleteket ebben a szinten, ez a megközelítés jobb módja lehet a webhelyek ikonjainak kiszolgálására. Rugalmassága, méretezhetősége, retina-kész, nagyon kis fájlmérettel, amit még kérhetünk?

Végül, ha mélyebben akarsz merülni ebbe a témába, az alábbiakban néhány hasznos hivatkozást, valamint demó és forráskódunkat töltöttünk le a letöltéshez.

• Hogyan készítsünk saját ikont Webfont - WebDesignerDepot.com
• Betűtípusok és adattulajdonságok megjelenítése - 24Ways
• Privát felhasználás Unicode - Wikipedia

• Demó
• Letöltés forrása