Share
Che ci crediate o no, c'è un formato immagine che è integrato direttamente nel tuo browser. Consente di scaricare le immagini ancor prima che siano necessarie, li rende perfettamente visibili sugli schermi Retina e consente loro di applicare a loro i colori e gli effetti CSS. Ok, non sono del tutto sincero lì. Non è un formato immagine in quanto tale, ma il resto si applica ancora. utilizzando Unicode puoi creare icone che sono indipendenti dalla risoluzione, non hanno praticamente tempo di download e possono anche essere abbinate a CSS.
In questo articolo, ti descriverò le nozioni di base e alcune delle cose interessanti che puoi fare con Unicode.
Unicode è un modo per consentire a lettere e segni di punteggiatura di lingue diverse di essere visualizzati correttamente in un singolo documento. Questo è incredibilmente utile; significa che il tuo sito può essere utilizzato in tutto il mondo e mostrerà esattamente ciò che volevi condividere, indipendentemente dal fatto che includa caratteri accentati in francese o sia interamente scritto in Kanji.
Anche Unicode viene continuamente aggiunto a; attualmente è sulla versione 6.3, che ha poco meno di 110.000 caratteri. La versione 7 sarà rilasciata entro la fine dell'anno e aggiungerà quasi 3.000 nuovi personaggi.
Accanto a lettere e numeri, Unicode specifica anche alcuni simboli e icone. Più recentemente questi si sono espansi per includere le icone Emoji che potresti aver visto su messaggistica iOS:
Le pagine HTML sono composte da sequenze di caratteri Unicode e, quando vengono inviate su una rete, vengono convertite in byte. Ad ogni lettera o carattere per ogni lingua viene assegnato un codice univoco, che può essere codificato quando il documento viene salvato o condiviso.
Idealmente, questa codifica utilizza un sistema noto come UTF-8, in quanto può codificare qualsiasi carattere Unicode, ma anche se così non fosse, qualsiasi carattere può essere definito da un riferimento al carattere numerico. Ad esempio, utilizzando ♥ produrrà un cuore, e puoi semplicemente digitare quel codice direttamente nel tuo html ♥.
Quel numero può essere un numero standard o il suo equivalente esadecimale. Se è esadecimale, allora il numero ha bisogno di un X di fronte, così & # X2665; darà lo stesso cuore (2665 è esadecimale per 9829).
Se stai aggiungendo il carattere Unicode con i CSS, dovrai utilizzare il valore esadecimale.
Alcuni dei simboli Unicode più utilizzati hanno un nome o un'abbreviazione più memorizzabili che possono essere utilizzati al posto di quei codici numerici - probabilmente hai usato & (e commerciale) o < (meno di) per esempio.
Bella domanda, ma ci sono diversi motivi per cui posso pensare:
Accentsconagua
@ Font-face iconaIl primo di questi motivi non dovrebbe richiedere alcun lavoro aggiuntivo. Se il tuo file HTML viene salvato come UTF-8 e viene codificato quando viene inviato su una rete come UTF-8, allora tutto dovrebbe essere perfetto.
Dovrebbero. Sfortunatamente, non tutti i browser o dispositivi supportano tutti i caratteri Unicode allo stesso modo (non ti aspettavi che qualcosa sul web fosse così semplice?) Caratteri come i simboli Emoji non sono supportati su tutti i dispositivi, ma quei caratteri "nominati" sono molto più affidabile.
Per assicurarti di utilizzare UTF-8 in una pagina HTML5, aggiungi al delle tue pagine web. Se non stai usando HTML5 allora avrai bisogno anziché.
La seconda ragione è perché ci sono molti caratteri Unicode molto utili che possono essere usati come icone su una pagina web. Ad esempio: ▶, ≡ e ♥.
La cosa fantastica è che, dove supportato, non ci sono file extra da scaricare per mostrare queste icone, il che significa che il tuo sito è un po 'più veloce. Puoi anche aggiungere un colore o un'ombra esterna a loro con i CSS. Diventando più creativo, puoi aggiungere una transizione per cambiare il colore in modo fluido quando qualcuno passa sopra l'icona - e non puoi farlo con le immagini.
Diciamo, per esempio, che volevo includere un piccolo indicatore di valutazione sulla mia pagina web. Potrei fare qualcosa del genere:
& # X2605; & # X2605; & # X2605; & # X2606; & # X2606; Questo ci darebbe qualcosa come l'immagine qui sotto:
Un indicatore di valutazione di esempio visualizzato in Firefox Ciò che potresti vedere occasionalmente è qualcosa del genere:
L'esempio di classificazione visualizzato su un BlackBerry 9000 Questo è ciò che accade quando questi caratteri non funzionano sul dispositivo o sul browser in uso. (Fortunatamente, queste forme stellari sono molto ben supportate, e ho sempre incontrato solo vecchi telefoni BlackBerry che hanno problemi con loro).
Il carattere che vedi se il carattere Unicode richiesto non è supportato può variare; potresti vedere un rettangolo vuoto o un diamante con un punto interrogativo.
Quindi, come puoi trovare il carattere Unicode che vorresti usare? Bene, puoi scorrere un sito come Unicodator per vedere cosa è disponibile, ma mi piace usare Shapecatcher: questo incredibile sito ti permette di disegnare l'icona, e ti suggerirà i caratteri Unicode più vicini che può trovare tra cui scegliere.
Se stai usando un @ Font-face icona, quindi potresti prendere in considerazione l'utilizzo di un carattere Unicode simile al fallback. In questo modo, su un browser o dispositivo che non supporta @ Font-face (come Opera Mini o Windows Phone 7) l'utente vedrebbe almeno un personaggio simile:
Font Icone fantastiche in Chrome a sinistra, e sulla destra i caratteri Unicode sottostanti sono mostrati in Opera Mini Molti @ Font-face gli strumenti utilizzano di default un intervallo di caratteri Unicode che deliberatamente non hanno alcun significato o forma predeterminata (spesso definita come la area ad uso privato o caratteri PUA). La caduta di questo approccio è quella in cui @ Font-face non è supportato, l'utente è lasciato con una forma che non ha alcun significato.
L'utilizzo dei caratteri PUA può anche causare l'accesso a Internet Explorer 8 Modalità di compatibilità, e le cose oscure si trovano lungo quel percorso - vedi l'articolo di Jeremy Keith per ulteriori informazioni sull'argomento.
IcoMoon è ottimo per la creazione @ Font-face icona imposta e consente di scegliere qualsiasi carattere Unicode come base per un'icona.
Basta fare attenzione però - alcuni browser e dispositivi non amano certi caratteri Unicode utilizzati @ Font-face, e non renderà l'icona. Potrebbe valere la pena eseguire il carattere Unicode suggerito tramite Unify - questo ti darà un'indicazione di quanto è sicuro usare quel personaggio in un @ Font-face set di icone.
Un problema nell'usare i caratteri Unicode come fallback di font-face è che spesso sono scarsamente supportati per gli screen reader (di nuovo, Unify ha alcuni dati su questo) quindi dovrai pensare attentamente a come viene usata l'icona.
Se l'icona è puramente decorativa accanto a un'etichetta di testo che verrà letta da uno screen reader, non mi preoccuperei troppo. Tuttavia, se l'icona è autonoma, è possibile che si desideri aggiungere un'etichetta di testo nascosta per aiutare gli utenti di screen reader. Anche se il carattere Unicode viene letto dallo screen reader, è probabile che non assomigli a quello che stai usando. Ad esempio, se stai usando & # X2261; per l'icona di navigazione a tre linee orizzontali 'burger', VoiceOver su iOS la leggerà come "Identica a".
Pochissimi tipi di carattere avranno caratteri per l'intera gamma Unicode, quindi se stai scegliendo un font, assicurati di provare alcuni caratteri che probabilmente ti serviranno.
Provare Simbolo dell'interfaccia utente di Segoe o Arial Unicode MS per icone isolate. È probabile che questi caratteri siano su un PC e su un Mac, Lucida Grande ha un gran numero di caratteri Unicode. Se vuoi usarli, aggiungili al relativo famiglia di font Voce CSS in modo che l'utente vedrà il carattere Unicode in questi caratteri se sono installati.
Sarebbe utile se ci fosse un modo per scoprire se un carattere Unicode fosse supportato o meno prima di usarlo, ma non c'è un modo sicuro per farlo.
Modernizr ha un po 'di JavaScript per provare e testare il supporto Emoji, ma funziona controllando un singolo pixel per vedere se c'è qualcosa. Quindi se il personaggio che vuoi testare non copre quello spazio, anche quando viene visualizzato, allora il test ti darà il risultato sbagliato. E solo perché un carattere Unicode viene visualizzato correttamente, non significa che l'altro 109.999 sarà.
In breve, testarlo. E assicurati, se il personaggio non è supportato, che l'utente possa ancora capire cosa sta succedendo.
Non si tratta solo di pagine Web che è possibile utilizzare Unicode su entrambe le e-mail possono essere migliorate con loro.
Questa è la stessa storia però; alcuni client e dispositivi di posta elettronica li supportano, altri no. Campaign Monitor ha effettuato alcuni test che potrebbero aiutarti a decidere se utilizzarli.
Quando essi siamo supportati, possono essere molto efficaci. Ad esempio, se un carattere Emoji viene utilizzato in una riga dell'oggetto, quell'icona colorata potrebbe risaltare bene in una casella di posta.
Questo avvolge proprio questa introduzione a Unicode. Spero sia stato utile e ti ho aiutato a capire meglio come funziona Unicode e come usarlo.
Se avete domande, per favore basta chiedere nella sezione commenti.
