Share
Tro det eller inte, det finns ett bildformat som är byggt direkt i din webbläsare. Det låter bilder laddas ner redan innan du behöver dem, gör dem perfekt på näthinnans skärmar, och låter dem få CSS-färger och effekter applicerade på dem. Ok, jag är inte helt sanningsenlig där. Det är inte ett bildformat som sådant - men resten gäller fortfarande. Använder sig av Unicode du kan skapa ikoner som är upplösningsoberoende, har nästan ingen nedladdningstid och kan också utformas med CSS.
I den här artikeln kommer jag att köra dig igenom grunderna, liksom några av de intressanta sakerna du kan göra med Unicode.
Unicode är ett sätt att låta bokstäver och skiljetecken från olika språk visas korrekt i ett enda dokument. Detta är otroligt användbart; det betyder att din webbplats kan användas runt om i världen och visar exakt vad du ville dela - oavsett om det händer att inkludera franska accenta tecken eller är helt skrivet i Kanji.
Unicode läggs också kontinuerligt till; för närvarande är det på version 6.3, som har knappt 110 000 tecken. Version 7 kommer att släppas senare i år och kommer att lägga till nästan 3000 nya tecken.
Vid sidan av bokstäver och siffror specificerar Unicode också vissa symboler och ikoner. Mer nyligen har dessa utvidgats för att inkludera de emoji-ikoner som du kanske har sett på iOS-meddelanden:
HTML-sidor består av sekvenser av Unicode-tecken, och när de skickas över ett nätverk konverteras de till byte. Varje bokstav eller tecken för varje språk ges en unik kod, och detta kan kodas när dokumentet sparas eller delas.
Idealiskt använder denna kodning ett system som är känt som UTF-8, eftersom det här kan koda något Unicode-tecken, men även om det inte var fallet kan ett tecken definieras av en numerisk teckenreferens. Till exempel, med användning av ♥ kommer att producera ett hjärta, och du kan bara skriva in den här koden direkt i din html ♥.
Det numret kan antingen vara ett standardnummer eller dess hexadecimala ekvivalent. Om det är hexadecimalt, behöver numret en x framför det, så & # X2665; kommer att ge samma hjärta (2665 är hex för 9829).
Om du lägger till Unicode-tecknet med CSS måste du använda det hexadecimala värdet.
Några av de mest använda Unicode-symbolerna har ett mer minnesvärt namn eller en förkortning som kan användas istället för dessa nummerkoder - du har antagligen använt & (ampersand) eller < (mindre än) till exempel.
Bra fråga, men det finns flera anledningar att jag kan tänka på:
Accentsconagua
@ Font-face ikonDen första av dessa skäl bör inte kräva ytterligare arbete. Om din HTML-fil är sparad som UTF-8 och kodas när den skickas via ett nätverk som UTF-8, så ska allt se bra ut.
Skall. Tyvärr kan inte alla webbläsare eller enheter stödja alla Unicode-figurer lika (du förväntade dig inte att något på webben var så enkelt gjorde du?) Tecken som Emoji-symbolerna stöds inte på alla enheter, men de "namngivna" tecknen är mycket mer tillförlitlig.
För att vara säker på att du använder UTF-8 på en HTML5-sida, lägg till till av dina webbsidor. Om du inte använder HTML5 behöver du istället.
Den andra anledningen är att det finns många mycket användbara Unicode-tecken som kan användas som ikoner på en webbsida. Till exempel: ▶, ≡ och ♥.
Vad är bra är det, där det stöds, det finns inga extra filer att ladda ner för att visa dessa ikoner, vilket innebär att din webbplats är lite snabbare. Du kan också lägga till färg eller en droppskugga till dem med CSS. Om du blir mer kreativ kan du sedan lägga till en övergång för att smidigt byta färg när någon svänger över ikonen - och du kan inte göra det med bilder.
Låt oss exempelvis säga att jag ville inkludera en liten stjärnklassindikator på min webbsida. Jag kunde göra något så här:
& # X2605; & # X2605; & # X2605; & # X2606; & # X2606; Detta skulle ge oss något som bilden nedan:
En exempelvärdesindikator som visas i Firefox Vad du än en gång ser, är något som detta:
Klassificeringsexemplet som ses på en BlackBerry 9000 Det här är vad som händer när dessa tecken inte fungerar på enheten eller webbläsaren som används. (Lyckligtvis är dessa stjärnformar mycket väl stödda, och jag har bara någonsin stött på äldre BlackBerry-telefoner som har problem med dem).
Tecknet som du ser om det nödvändiga Unicode-tecknet inte stöds varierar. du kanske ser en tom rektangel, eller en diamant med ett frågetecken istället.
Så hur kan du hitta Unicode-tecknet som du vill använda? Tja, du kan bläddra igenom en webbplats som Unicodinator för att se vad som är tillgängligt, men jag älskar att använda Shapecatcher - den här otroliga webbplatsen gör att du kan rita ikonen och det kommer att föreslå de närmaste Unicode-tecknen som du kan hitta för dig att välja från.
Om du använder en @ Font-face ikon, då kanske du vill överväga att använda ett liknande Unicode-tecken som fallbacken. På så sätt, i en webbläsare eller enhet som inte stöder @ Font-face (som Opera Mini eller Windows Phone 7) skulle användaren åtminstone se liknande tecken:
Teckensnitt Fantastiska ikoner i Chrome till vänster och till höger visas de underliggande Unicode-tecknen i Opera Mini Många @ Font-face verktyg som standard för att använda en rad Unicode-tecken som avsiktligt inte har någon betydelse eller förutbestämd form (kallas ofta privat bruk område eller PUA-tecken). Nedfallet av detta tillvägagångssätt är att där @ Font-face stöds inte, användaren lämnas med en form som inte har någon mening alls.
Använda PUA-tecknen kan också leda till att Internet Explorer 8 går in Kompatibilitetsläge, och mörka saker ligger ner den vägen - se Jeremy Keiths artikel för mer om ämnet.
IcoMoon är utmärkt för att skapa @ Font-face ikonuppsättningar, och det låter dig välja något Unicode-tecken som grund för en ikon.
Var bara försiktig - vissa webbläsare och enheter gillar inte vissa Unicode-tecken som används för @ Font-face, och kommer inte att göra ikonen. Det kan vara värt att köra det föreslagna Unicode-tecknet genom Unify - det här ger dig en indikation på hur säkert det är att använda det tecknet i en @ Font-face ikonuppsättning.
Ett problem med att använda Unicode-tecken som fallback-teckensnitt, är att de ofta är dåligt stödda för skärmsläsare (igen, Unify har lite data på detta), så du måste tänka noggrant på hur ikonen används.
Om din ikon är rent dekoration bredvid en textikett som skulle läsas av en skärmsläsare, skulle jag inte oroa mig för mycket. Om din ikon är fristående kan du dock lägga till en dold textetikett för att hjälpa användare av skärmläsaren. Även om Unicode-tecknet läses ut av skärmläsaren är chansen att det inte kommer att vara något som du använder det för. Till exempel, om du använder & # X2261; för den tre horisontella linjen "burger" navigationsikon, VoiceOver på iOS kommer att läsa den som "Identisk till".
Mycket få teckensnitt kommer att ha tecken för hela Unicode-sortimentet, så om du väljer ett teckensnitt, se till att försöka få några tecken som du sannolikt kommer att behöva.
Prova Segoe UI Symbol eller Arial Unicode MS för isolerade ikoner. Dessa teckensnitt är rimligen sannolikt att vara på en dator och på en Mac, Lucida Grande har ett stort antal Unicode-tecken. Om du vill använda dessa, lägg bara till dem till relevanta typsnittsfamilj CSS-inmatning så att användaren kommer att se Unicode-tecknet i dessa teckensnitt om de är installerade.
Det skulle vara praktiskt om det fanns något sätt att upptäcka huruvida ett Unicode-tecken stöddes innan du använde det, men det finns inget garanterat sätt att göra.
Modernizr har lite JavaScript för att försöka prova för Emoji support - men det här fungerar genom att kolla en enda pixel för att se om det finns något. Så om tecknet du vill testa täcker inte det utrymmet, även om det visas, kommer testet att ge dig fel resultat. Och bara för att ett Unicode-tecken visas korrekt betyder det inte att den andra 109.999 kommer att vara.
Kort sagt, testa det. Och se till att om tecknet inte stöds kan användaren fortfarande förstå vad som händer.
Det är inte bara webbsidor som du kan använda Unicode på - e-post kan också förbättras med dem.
Detta är dock samma historia; vissa e-postklienter och enheter stöder dem, vissa gör det inte. Kampanjövervakaren har gjort några test som kan hjälpa dig att bestämma om du ska använda dem.
När de är stöds, de kan vara mycket effektiva. Om exempelvis en Emoji-karaktär används i en ämnesrad, kan den färgade ikonen sticka fint ut i en inkorg.
Det handlar om att omsluta denna introduktion till Unicode. Jag hoppas att det har varit användbart och hjälpt dig att få en tydligare förståelse för hur Unicode fungerar och hur man använder den.
Om du har några frågor, vänligen fråga bara i kommentarfältet.
