K2
(A blog pihen.)

Ikonok a weben, fontként

March 14, 2011

Ma vettem észre, hogy a nagyszerű minimalista Iconic ikon-szettben mellékelve van az egész gyűjtemény betűtípusként, a TTF és OTF mellett EOT formátumban is – ami a Microsoft szabványa a @font-face féle CSS font-beágyazáshoz. Amellett, hogy így kényelmesen lehet Photoshopban tervezéskor használni az ikonokat, a @font-face megközelítés az éles weboldalon is sok új lehetőséget nyit meg.

Természetesen erre a szerző is gondolt, (ezért is készültek el a webfont verziók), sőt a pakkban mellékelte a megoldáshoz tartozó CSS-t is (az első linken letölthető). Persze más egyszínű ikonszettel is el lehet játszani ugyanezt.

Amellett, hogy egy ilyen font-fájl jóeséllyel kisebb, mint a sprite-ba gyúrt ikonok, az egyesével lehúzottaknál pedig jóval kevesebb HTTP kérésből a böngészőbe ér (egyből), ezzel az egész kalanddal egy vektoros ikont kapunk. Nagyon szabadon lehet hangolgatni az ikonokat, anélkül használva őket több méretben és színben az oldalon, hogy mindegyikhez külön képet kéne betölteni, a kalandvágyók pedig CSS3 transzformációkkal is vagánykodhatnak.

A CSS így néz ki, font betölt, aztán használ, mintha csak Windings lenne (részlet a fenti Iconic szetthez mellékelt kódból). Érdemes a :before/:after content tulajdonságba rakni az ikonnak megfelelő betűt, nem a HTML kódba, mert ha módosítani kell, utóbbinak csúnya vége lenne.

@font-face {
  font-family: 'IconicStroke';
    src: url("/wp-content/uploads/resources/iconic_stroke.eot");
    src: local('IconicStroke'),
       url("/wp-content/uploads/resources/iconic_stroke.svg#iconic") format('svg'),
	   url("/wp-content/uploads/resources/iconic_stroke.otf") format('opentype');
}
.iconic {
	font-family: "IconicStroke";
}
.iconic.image:before { content: "?"; }
.iconic.article:before { content: ">"; }
.iconic.read-more:before { content: "."; }
.iconic.headphones:before { content: ","; }
.iconic.equalizer:before { content: "<"; }
.iconic.fullscreen:before { content: ":"; }

Az első, részletesebb írás a témában, a kevésből, ami látszólag foglalkozik az egésszel az interneten.

Comment
(2)

Comments

2

    Maga az ötlet tetszik (szeretem az ilyen frappáns megoldásokat), viszont ami tény, hogy a 20px körüli ikonok ezzel a módszerrel elég gyatrán néznek ki Windows alatt (Win7, hinting bekapcsolva.)

    Az cocoas, vagy freetype-os hinterrel jó lehetne, de a világ maradék 90%-nyi Windowsán csúnya. :(

    Ezt az Iconic-ot végigpróbálgattam, és rendben volt kis méretben, még Cleartype nélkül is. Gondolom sokat függ a grafika bonyolultságától.

about

yet another indie guy

archive