Share
Utvecklingen av Internetteknologi upphör aldrig att förvåna. Verkligen dagligen uppfattas nya koncept och tekniker av kreativa och begåvade människor. Med moderna webbläsare antas i större takt, system som CSS3 blir allt mer lönsamma för användning på projekt av alla storlekar. Tydligt kan detta ses genom att titta på nya tjänster som sprider sig på nätet som TypKit. Konceptuellt, om vi dekonstruerar ett teckensnitt ner till det grundläggande elementet, kan vi utnyttja denna teknik för andra saker än typ, ikoner.
Under en kort tid började utvecklarna producera webbplatser med liten hänsyn till bandbreddskonsumtion. html och CSS där restriktiva och Adobe Flash var en öppen duk för designers och utvecklare att spänna animeringar och komplexa layouter i. Detta resulterade i några extremt bandbredd tunga platser-vi minns alla några. Det var dagarna före spridningen av mobila smarta telefoner.
Med smarta telefoner som använder Internet oftare har bandbredd och sidlasthastigheter plötsligt återgått till framkant. Tack och lov, framsteg i html, CSS, och JavaScript har gjort det möjligt. Centralt för webbsidans hastighet och lyhördhet är antalet HTTP begär att en sidlast måste göra. Moderna webbläsare begränsar antalet förfrågningar till en enda server. W3C HTTP 1.1-specifikationen läser
"En enskild klient SKA INTE bibehålla mer än 2 anslutningar med någon server eller proxy. En proxy borde använda upp till 2 * N-anslutningar till en annan server eller proxy, där N är antalet samtidiga aktiva användare. Dessa riktlinjer är avsedda att förbättras HTTP svarstider och förhindra trängsel. "
En teknik som blivit allt populärare är användningen av CSS sprites. CSS sprites är utformade för att minska antalet HTTP begäran till webbservern genom att kombinera många mindre bilder till en enda större bild och definiera en blocknivå CSS element för att bara visa en definierad del av den större bilden. Tekniken är enkel men genial.
Teckensnitt på deras mest grundläggande molekylära nivå är en serie vektorglyfer packade upp i ett enda "glyph arkiv".
CSS3 har introducerat i webbutvecklingsvärlden möjligheten att bädda in teckensnitt med @ Ansikte ansikte deklaration. Utan frågan är denna framsteg inom internetteknologi ett av de mest spännande och viktiga stegen i vår korta historia. Med utvecklare som kan bädda in fonter efter eget val, kan designers skapa layouter som kommer att göra betydligt mer konsekvent från plattform till plattform, vilket gör att den interaktiva layouten är närmare den som är kusin.
Om vi tittar närmare på tekniken bakom ett teckensnitt kan vi få en mycket bättre förståelse för hur de kan användas och distribueras. Teckensnitt på deras mest grundläggande molekylära nivå är en serie vektorglyfer förpackade i ett enda "glyph arkiv". Vi kan sedan hänvisa varje glyf med motsvarande karaktärskod. Teoretiskt är det väldigt lik det sätt på vilket vi hänvisar till en matris på nästan vilket programmeringsspråk som helst - genom ett nyckel / värdepar.
Med tanke på detta kan de glyfer vi refererar verkligen vara en vektorbaserad enda färgbild. Det här är inget nytt - vi har alla sett Dingbats och Webdings. De är två exempel på typsnitt utan typ, det vill säga en serie vektorbaserade bilder sammanställda i ett enda teckens arkiv.
Med ankomsten av inbäddning av teckensnitt och insikten om att teckensnitt är i huvudsak en serie enkla vektorglyfer, började jag experimentera om hur man använder det här formatet till min fördel. Konceptuellt, om jag ställde alla nödvändiga ikoner för en viss plats i en anpassad typsnitt skulle jag kunna använda dessa ikoner var som helst på webbplatsen med förmågan att ändra storlek och färg, lägga till bakgrunder, skuggor och rotation och nästan vad som helst annan CSS kommer att tillåta text. Den ytterligare fördelen är en singel CSS sprite-liknande HTTP begäran.
För att illustrera har jag sammanställt ett nytt teckensnitt med några av de stora ikonerna från Brightmix.
Jag har använt de små bokstäverna för vanliga ikoner och de stora versionerna för samma ikon i en cirkulär behandling.
För att använda mitt nya ikonpaket måste jag först exportera min typsnitt som ett antal olika typsnittfiler (.eot, .woff, .ttf, .svg) för att vara kompatibla med alla webbläsare. Temat för inbäddning av teckensnitt och filformatomvandling är täckt någon annanstans, så jag kommer att undvika en detaljerad förklaring här. Men CSS skulle se ut så här.
Accentsconagua
@ font-face font-family: 'IconPack'; src: url ('iconpack.eot'); src: local ('IconPack'), url ('iconpack.woff') format ('woff'), url ('iconpack.ttf') format ('truetype'), url ('iconpack.svg # IconPack') format ( 'svg'); En gång inbäddad, har jag nu en komplett ikon i vektorformat som referens. För att referera till en ikon behöver jag helt enkelt en stil som innehåller typsnittsfamilj av "IconPack".
en
Ovanstående exempel skulle göra en stjärna och är den mest grundläggande användningen av Icon Pack-konceptet, men det är inte särskilt intuitivt ur ett utvecklingsperspektiv, inte SEO vänlig, inte heller graciös nedbrytning i fallet med icke-CSS Stöd.
För att åtgärda situationen kommer jag att inkludera en :innan pseudo-element och sätta in innehållet i a spänna märka.
stjärna
Nu läggs stjärnan i teckenfönstret och jag kan skifta visibiliteten hos texten med hjälp av show och Dölj klasser. Resultatet är en lätt hänvisning CSS klass som försämrar graciöst och är optimerad för sökmotorer. För hela min uppsättning ikoner kan jag skriva något som nedan.
skärmikonen
Fördelen här är att ikonen ska skala med teckenstorleken. Faktum är att alla ikoner ska skala och bibehålla perfekt klarhet.
Hittills har vi bara rört toppen av isberget, inget banbrytande här, även om du kanske börjar se möjligheterna. En verklig världscenario skulle vara att ersätta list-item-stil. Som användes för att använda en bild kan vi nu använda en ikon för vektor från vår ikonpaket. Fördelen här är att ikonen ska skala med teckenstorleken. Faktum är att alla ikoner ska skala och bibehålla perfekt klarhet.
Eftersom ikonerna nu är placerade på vår sida som om de var text kan vi tillämpa alla giltiga CSS stil till dem utan att ladda ner några andra tillgångar. Vi kunde ansöka Färg, textstorlek, text-shadow, etc och utnyttja :sväva pseudo-element för mus över effekter - allt med en enda glyph.
Som med allt finns det några olyckliga begränsningar. Med detta skrivande finns det inget sätt att visa en enda glyph med flera färger. Det har funnits en del CSS-trickery för att få gradienter över levande text, men komplexa former med varierande färger i en enda glyph är en begränsning. Med detta sagt finns det sätt att approximera flerfärgade glyfer genom att segragera delarna av en vektorgrafik i enskilda glyfer och sedan montera och färglägga dem på sidan genom CSS.
En annan intressant användning är en enkel CAPTCHA godkännande. Genom att ersätta glyphs för alfabetet med siffror kommer användarna att se siffror, men sidkoden kommer att vara bokstäver. En del enkel beräkning för att översätta mellan de två, och du har en lättläst CAPTCHA.
För att bättre illustrera dessa begrepp har jag samlat en provsida bestående av två HTTP förfrågningar-sidkoden och ett enda ikonpaket. Inkluderat också är förmågan att skala skalvens storlek på sidan för att tydligt visa flexibiliteten att bädda in vektorglider. Företagets logotyp, navigering, bilder och CAPTCHA alla använder glyfer. Vänligen notera CAPTCHA ingår här är endast för illustration. För att använda detta på en produktionsplats rekommenderar jag att du validerar på serverns sida med en dynamisk algoritm som tillhör JavaScript.
Denna provsida demostrerar också användningen av en glyph som en skalbar "upprepande" bakgrund. Jag kommer att vara den första som erkänner att denna implementering i bästa fall är hack-ish, men jag tror att den visar flexibiliteten och mångsidigheten hos Icon Pack.
Det här uppenbarligen öppnar vissa möjligheter. Designers kan utveckla Icon Packs till salu, företagsenheter kan vara värd för ett enda ikonpaket som ska användas på alla företags media. Malldesigners kan enkelt distribuera flera färgalternativ i samma mall alla utan att behöva spara och exportera en enda extra fil. Webbdesigners kan enkelt skala existerande webbplatser för att vara kompatibla med handhållna enheter. Dessutom visar denna teknik våra ikoner till DOM möjliggör animerade Flash-liknande effekter med din favorit JavaScript API.
Som användar- och webbläsarsupport för CSS3 tränger vidare, Icon Packs kommer snart att ha stor inverkan på innehållsleverans, vilket främjar de lättvikta, skalbara, trenderna i flera enheter som börjar bli en nödvändighet.
