Share
Croyez-le ou non, il existe un format d'image intégré à votre navigateur. Il permet de télécharger les images avant même d’en avoir besoin, de les restituer parfaitement sur les écrans Retina et de leur appliquer les couleurs et les effets CSS. Ok, je ne suis pas tout à fait honnête là-bas. Ce n'est pas un format d'image en tant que tel, mais le reste s'applique toujours. En utilisant Unicode vous pouvez créer des icônes indépendantes de la résolution, n'ayant pratiquement pas de temps de téléchargement et pouvant également être stylées avec CSS.
Dans cet article, je vais vous présenter les bases, ainsi que certaines des choses intéressantes que vous pouvez faire avec Unicode..
Unicode permet aux lettres et aux signes de ponctuation de différentes langues de s'afficher correctement dans un seul document. C'est incroyablement utile. cela signifie que votre site peut être utilisé dans le monde entier et montrera exactement ce que vous vouliez partager - qu'il s'agisse d'inclure des caractères accentués français ou qu'il soit entièrement écrit en kanji.
Unicode est également continuellement ajouté à; actuellement, il est sur la version 6.3, qui compte un peu moins de 110 000 caractères. La version 7 sortira plus tard cette année et ajoutera près de 3 000 nouveaux personnages..
En plus des lettres et des chiffres, Unicode spécifie également des symboles et des icônes. Plus récemment, ceux-ci ont été étendus pour inclure les icônes Emoji que vous avez pu voir sur la messagerie iOS:
Les pages HTML sont constituées de séquences de caractères Unicode et, lorsqu'elles sont envoyées sur un réseau, elles sont converties en octets. Chaque lettre ou caractère de chaque langue se voit attribuer un code unique, qui peut être encodé lors de la sauvegarde ou du partage du document..
Idéalement, ce codage utilise un système appelé UTF-8, car il peut coder n’importe quel caractère Unicode, mais même si ce n’était pas le cas, tout caractère peut être défini par un référence de caractère numérique. Par exemple, en utilisant ♥ produira un coeur, et vous pouvez simplement taper ce code directement dans votre html ♥.
Ce nombre peut être un nombre standard ou son équivalent hexadécimal. Si c'est hexadécimal, alors le nombre a besoin d'un X devant, alors & # x2665; donnera le même coeur (2665 est hexadécimal pour 9829).
Si vous ajoutez le caractère Unicode avec CSS, vous devrez utiliser la valeur hexadécimale..
Certains des symboles Unicode les plus fréquemment utilisés ont un nom ou une abréviation plus mémorable qui peut être utilisé à la place de ces codes numériques - vous avez probablement déjà utilisé Et (esperluette) ou < (moins de) par exemple.
Bonne question, mais je peux penser à plusieurs raisons:
Accentsconagua
@ font-face icôneLa première de ces raisons ne devrait pas nécessiter de travail supplémentaire. Si votre fichier HTML est enregistré au format UTF-8 et codé lorsqu’il est envoyé sur un réseau au format UTF-8, tout devrait être superbe..
Devrait. Malheureusement, tous les navigateurs et appareils ne prennent pas tous les caractères Unicode en charge de manière égale (vous ne vous attendiez pas à ce que quelque chose sur le Web soit aussi simple, n'est-ce pas?) beaucoup plus fiable.
Pour vous assurer que vous utilisez UTF-8 dans une page HTML5, ajoutez au de vos pages web. Si vous n'utilisez pas HTML5, vous aurez besoin de au lieu.
La deuxième raison est qu'il existe de nombreux caractères Unicode très utiles qui peuvent être utilisés comme icônes sur une page Web. Par exemple: ▶, ≡ et ♥.
Ce qui est génial, c’est que, là où il est pris en charge, il n’ya aucun fichier supplémentaire à télécharger pour afficher ces icônes, ce qui signifie que votre site est un peu plus rapide. Vous pouvez également leur ajouter de la couleur ou une ombre portée avec CSS. En devenant plus créatif, vous pouvez ensuite ajouter une transition pour changer la couleur en douceur lorsque quelqu'un survole l'icône - ce que vous ne pouvez pas faire avec des images.
Supposons, par exemple, que je veuille inclure un petit indicateur de classement sur ma page Web. Je pourrais faire quelque chose comme ça:
& # x2605; & # x2605; & # x2605; & # x2606; & # x2606; Cela nous donnerait quelque chose comme l'image ci-dessous:
Un exemple d'indicateur d'évaluation vu dans Firefox Ce que vous pouvez parfois voir cependant, est quelque chose comme ceci:
L'exemple d'évaluation vu sur un BlackBerry 9000 C'est ce qui se produit lorsque ces caractères ne fonctionnent pas sur le périphérique ou le navigateur utilisé. (Heureusement, ces formes d'étoiles sont très bien prises en charge, et je n'ai jamais rencontré que des téléphones BlackBerry plus anciens qui ont des problèmes avec eux).
Le caractère que vous voyez si le caractère Unicode requis n'est pas pris en charge variera. vous pouvez voir un rectangle vide ou un diamant avec un point d'interrogation.
Alors, comment pouvez-vous trouver le caractère Unicode que vous souhaitez utiliser? Eh bien, vous pouvez faire défiler un site comme Unicodinator pour voir ce qui est disponible, mais j'adore utiliser Shapecatcher - ce site incroyable vous permet de dessiner l'icône et suggère les caractères Unicode les plus proches parmi lesquels vous pouvez choisir..
Si vous utilisez un @ font-face icône, vous voudrez peut-être envisager d’utiliser un caractère Unicode similaire à celui utilisé pour le repli. De cette façon, sur un navigateur ou un appareil qui ne prend pas en charge @ font-face (comme Opera Mini ou Windows Phone 7), l'utilisateur verrait au moins un caractère similaire:
Les icônes Font Awesome dans Chrome à gauche et à droite, les caractères Unicode sous-jacents sont affichés dans Opera Mini. Beaucoup @ font-face Les outils utilisent par défaut une plage de caractères Unicode qui n'ont délibérément aucune signification ou forme prédéterminée (souvent appelée la zone d'utilisation privée ou des caractères PUA). La chute de cette approche est celle où @ font-face n'est pas pris en charge, l'utilisateur se retrouve avec une forme qui n'a aucune signification.
L’utilisation des caractères PUA peut également entraîner le passage à Internet Explorer 8. Le mode de compatibilité, et des choses sombres se trouvent sur ce chemin - voir l'article de Jeremy Keith pour plus d'informations à ce sujet.
IcoMoon est idéal pour créer @ font-face jeux d'icônes, et vous permet de choisir n'importe quel caractère Unicode comme base pour une icône.
Soyez juste prudent cependant - certains navigateurs et appareils n'aiment pas que certains caractères Unicode soient utilisés pour @ font-face, et ne rendra pas l'icône. Il peut être intéressant d’exécuter le caractère Unicode suggéré dans Unify - cela vous indiquera dans quelle mesure il est prudent d’utiliser ce caractère dans un environnement protégé. @ font-face jeu d'icônes.
L’utilisation des caractères Unicode en tant que solution de remplacement pour les polices est souvent mal prise en charge par les lecteurs d’écran (ici encore, Unify contient des données), vous devez donc bien réfléchir à la façon dont l’icône est utilisée..
Si votre icône est purement une décoration à côté d'une étiquette de texte qui serait lue par un lecteur d'écran, alors je ne m'inquiéterais pas trop. Toutefois, si votre icône est autonome, vous pouvez ajouter une étiquette de texte masqué pour aider les utilisateurs de lecteurs d'écran. Même si le lecteur Unicode lit le caractère Unicode, il est fort probable qu'il ne ressemble en rien à son utilisation. Par exemple, si vous utilisez & # x2261; pour l'icône de navigation «burger» à trois lignes horizontales, VoiceOver sur iOS le lira comme «Identique à».
Très peu de polices auront des caractères pour la gamme Unicode complète. Si vous choisissez une police, essayez donc quelques caractères dont vous aurez probablement besoin..
Essayer Symbole de l'interface utilisateur ou Arial Unicode MS pour les icônes isolées. Il est relativement probable que ces polices se trouvent sur un PC et sur un Mac, Lucida Grande a un grand nombre de caractères Unicode. Si vous souhaitez les utiliser, ajoutez-les simplement à la liste famille de polices Entrée CSS pour que l'utilisateur voie le caractère Unicode dans ces polices si elles sont installées.
Il serait utile de pouvoir déterminer si un caractère Unicode était ou non pris en charge avant de l'utiliser, mais rien ne garantit qu'il en soit ainsi..
Modernizr a un peu de JavaScript pour essayer de tester le support Emoji - mais cela fonctionne en vérifiant un seul pixel pour voir s'il y a quelque chose. Donc, si le personnage que vous voulez tester ne couvre pas cet espace, même s'il est affiché, le test vous donnera un résultat erroné. Et ce n’est pas parce qu’un caractère Unicode est affiché correctement que les 109 999 autres seront affichés..
En bref, testez-le. Et assurez-vous, si le personnage n'est pas supporté, que l'utilisateur peut toujours comprendre ce qui se passe.
Ce n'est pas seulement les pages Web sur lesquelles vous pouvez utiliser Unicode - les e-mails peuvent également être améliorés.
C'est la même histoire cependant; Certains clients et périphériques de messagerie les prennent en charge, d'autres non. Campaign Monitor a effectué des tests qui pourraient vous aider à décider si vous devez les utiliser..
Quand ils sont soutenus, ils peuvent être très efficaces. Par exemple, si un caractère Emoji est utilisé dans une ligne d'objet, cette icône colorée pourrait bien se distinguer dans une boîte de réception..
Cela met fin à cette introduction à Unicode. J'espère que cela vous a été utile et vous a aidé à mieux comprendre le fonctionnement de Unicode et son utilisation..
Si vous avez des questions, n'hésitez pas à demander dans la section commentaires.
