Share
Tro det eller ei, det er et bildeformat som er bygd rett inn i nettleseren din. Det gjør at bilder kan lastes ned selv før du trenger dem, gjør dem perfekt på Retina-skjermer, og lar dem få CSS-farger og effekter brukt på dem. Ok, jeg er ikke helt sannferdig der. Det er ikke et bildeformat som sådan - men resten gjelder fortsatt. Ved hjelp av Unicode du kan lage ikoner som er oppløsning uavhengige, har nesten ingen nedlastingstid og kan også styles med CSS.
I denne artikkelen kjører jeg deg gjennom det grunnleggende, så vel som noen av de interessante tingene du kan gjøre med Unicode.
Unicode er en måte å la bokstaver og tegnsettingstegn fra forskjellige språk vises riktig i et enkelt dokument. Dette er utrolig nyttig; det betyr at nettstedet ditt kan brukes over hele verden og viser nøyaktig hva du ønsket å dele - om det skjer med franske aksenttegn eller helt skrevet i Kanji.
Unicode blir også kontinuerlig lagt til; for tiden er det på versjon 6.3, som har like under 110.000 tegn. Versjon 7 vil bli utgitt senere i år, og vil legge til nesten 3000 nye tegn.
Ved siden av bokstaver og tall angir Unicode også noen symboler og ikoner. Mer nylig har disse utvidet til å inkludere emoji-ikonene som du kanskje har sett på iOS-meldinger:
HTML-sider består av sekvenser av Unicode-tegn, og når de sendes over et nettverk, blir de konvertert til byte. Hvert brev eller tegn for hvert språk er gitt en unik kode, og dette kan kodes når dokumentet er lagret eller delt.
Ideelt sett bruker denne kodingen et system kjent som UTF-8, da dette kan kode for et Unicode-tegn, men selv om det ikke var tilfelle, kan et hvilket som helst tegn defineres av en numerisk tegnreferanse. For eksempel bruker ♥ vil produsere et hjerte, og du kan bare skrive den koden rett inn i html ♥.
Det tallet kan enten være et standardnummer, eller dets heksadesimale ekvivalent. Hvis det er heksadesimale, trenger nummeret en x foran det, så & # X2665; vil gi samme hjerte (2665 er hex for 9829).
Hvis du legger til Unicode-tegnet med CSS, må du bruke den heksadesimale verdien.
Noen av de mest brukte Unicode-symbolene har et mer minneverdig navn eller en forkortelse som kan brukes i stedet for disse nummerkoder - du har sikkert brukt & (ampersand) eller < (mindre enn) for eksempel.
Godt spørsmål, men det er flere grunner jeg kan tenke på:
Accentsconagua
@ Font-face ikonDen første av disse grunnene bør ikke kreve ytterligere arbeid. Hvis HTML-filen din er lagret som UTF-8, og er kodet når den sendes over et nettverk som UTF-8, så skal alt se bra ut.
Bør. Dessverre støtter ikke alle nettlesere eller enheter alle Unicode-tegn på samme måte (du hadde ikke forventet noe på nettet for å være så enkelt gjorde du?) Tegn som Emoji-symbolene støttes ikke på alle enheter, men de "navngitte" tegnene er mye mer pålitelig.
For å sikre at du bruker UTF-8 på en HTML5-side, legg til til av websidene dine. Hvis du ikke bruker HTML5, trenger du det i stedet.
Den andre grunnen er at det er mange veldig nyttige Unicode-tegn som kan brukes som ikoner på en nettside. For eksempel: ▶, ≡ og ♥.
Det er flott at det, der det støttes, ikke er noen ekstra filer å laste ned for å vise disse ikonene, noe som betyr at nettstedet ditt er litt raskere. Du kan også legge til farge, eller en dråpe skygge til dem med CSS. Når du blir mer kreativ, kan du legge til en overgang for å endre fargeen jevnt når noen svinger over ikonet - og du kan ikke gjøre det med bilder.
La oss for eksempel si at jeg ønsket å inkludere en liten stjerneklassifiseringsindikator på min nettside. Jeg kunne gjøre noe slikt:
& # X2605; & # X2605; & # X2605; & # X2606; & # X2606; Dette ville gi oss noe som bildet nedenfor:
Et eksempelangivelsesindikator som vises i Firefox Det du kanskje noen ganger ser skjønt, er noe slikt:
Vurderingseksemplet sett på en BlackBerry 9000 Dette skjer når disse tegnene ikke virker på enheten eller nettleseren som brukes. (Heldigvis er disse stjernene formene godt støttet, og jeg har bare noen gang kommet over eldre BlackBerry-telefoner som har problemer med dem).
Tegnet som du ser om det nødvendige Unicode-tegnet ikke støttes, vil variere; Du kan se et tomt rektangel, eller en diamant med et spørsmålstegn i stedet.
Så hvordan kan du finne Unicode-tegnet du vil bruke? Vel, du kan bla gjennom et nettsted som Unicodinator for å se hva som er tilgjengelig, men jeg elsker å bruke Shapecatcher - dette utrolige nettstedet lar deg tegne ikonet, og det vil foreslå de nærmeste Unicode-tegnene du finner for deg å velge fra.
Hvis du bruker en @ Font-face ikonet, vil du kanskje vurdere å bruke et lignende Unicode-tegn som fallback. På denne måten, i en nettleser eller enhet som ikke støtter @ Font-face (som Opera Mini eller Windows Phone 7) vil brukeren i det minste se et lignende tegn:
Skrift Fantastiske ikoner i Chrome til venstre, og til høyre vises de underliggende Unicode-tegnene i Opera Mini Mange @ Font-face verktøy som standard for å bruke en rekke Unicode-tegn som bevisst ikke har noen mening eller forhåndsbestemt form (ofte referert til som privat bruk område eller PUA-tegn). Nedgangen i denne tilnærmingen er at hvor @ Font-face støttes ikke, brukeren er igjen med en form som ikke har noen mening i det hele tatt.
Bruk av PUA-tegnene kan også føre til at Internet Explorer 8 går inn Kompatibilitetsmodus, og mørke ting ligger ned den veien - se Jeremy Keiths artikkel for mer om emnet.
IcoMoon er flott for å skape @ Font-face ikon sett, og det lar deg velge et hvilket som helst Unicode-tegn som grunnlag for et ikon.
Bare vær forsiktig - noen nettlesere og enheter liker ikke visse Unicode-tegn som brukes til @ Font-face, og vil ikke gjengi ikonet. Det kan være verdt å kjøre det foreslåtte Unicode-tegnet gjennom Unify - dette vil gi deg en indikasjon på hvor trygt det er å bruke det tegnet i en @ Font-face ikon sett.
Et problem med å bruke Unicode-tegn som et font-face-fallback, er at de ofte er dårlig støttet for skjermlesere (igjen, Unify har noen data på dette), så du må tenke nøye på hvordan ikonet blir brukt.
Hvis ikonet ditt er rent dekorasjon ved siden av en tekstetikett som ville bli lest av en skjermleser, ville jeg ikke bekymre meg for mye. Men hvis ikonet ditt er frittstående, vil du kanskje legge til en skjult tekstetikett for å hjelpe brukerne av skjermleseren. Selv om Unicode-tegnet leses ut av skjermleseren, er sjansene at det ikke vil være noe som det du bruker det til. For eksempel, hvis du bruker & # X2261; for de tre horisontale linjene 'burger' navigasjonsikon, vil VoiceOver på iOS lese det som "Identisk til".
Meget få skrifter vil ha tegn for hele Unicode-serien, så hvis du velger en skrift, må du sørge for å prøve noen få tegn du sannsynligvis trenger.
Prøve Segoe UI Symbol eller Arial Unicode MS for isolerte ikoner. Disse skriftene er rimelig sannsynlig å være på en PC, og på en Mac, Lucida Grande har et stort antall Unicode-tegn. Hvis du vil bruke disse, legger du bare til de aktuelle font-family CSS-oppføring, slik at brukeren vil se Unicode-tegnet i disse skriftene hvis de er installert.
Det ville være nyttig hvis det var noen måte å oppdage om et Unicode-tegn ble støttet før du brukte det, men det er ingen garantert måte å gjøre det på.
Modernizr har litt JavaScript for å prøve å teste for Emoji-støtte - men dette fungerer ved å sjekke en enkelt piksel for å se om noe er der. Så hvis tegnet du vil teste ikke dekker dette rommet, selv når det vises, vil testen gi deg feil resultat. Og bare fordi et Unicode-tegn vises riktig, betyr det ikke at den andre 109.999 vil være.
Kort sagt, test det. Og sørg for at hvis karakteren ikke støttes, kan brukeren fortsatt forstå hva som skjer.
Det er ikke bare nettsider som du kan bruke Unicode på, enten - e-post kan forbedres med dem også.
Dette er den samme historien skjønt; Noen e-postklienter og enheter støtter dem, noen gjør det ikke. Kampanjemonitoren har gjort noen test som kan hjelpe deg med å bestemme om du skal bruke dem.
Når de er støttet, kan de være svært effektive. For eksempel, hvis et emoji-tegn brukes i en emnelinje, kan det fargede ikonet skille seg pent ut i en innboks.
Det handler om å bryte opp denne introduksjonen til Unicode. Jeg håper det har vært nyttig og hjulpet deg med å få en klarere forståelse av hvordan Unicode fungerer og hvordan du bruker det.
Hvis du har spørsmål, vennligst bare spørg i kommentarfeltet.
