Comment empêcher les caractères Unicode de s'afficher en tant qu'emoji en HTML à partir de JavaScript?
Je trouve Unicode pour les caractères spéciaux de FileFormat.Info recherche .
Certains caractères sont rendus comme les glyphes classiques en noir et blanc, tels que ⚠ (signe d'avertissement, \u26A0 ou ⚠). Ceux-ci sont préférables, car je peux leur appliquer des styles CSS (tels que la couleur).
D'autres sont rendus comme des emoji cartoony plus récents, tels que ⌛ (hourglass, \u231B ou ⌛). Ceux-ci ne sont pas préférables, car je ne peux pas les styliser complètement.
Il semble que le navigateur effectue ce changement, car je peux voir le glyphe sablier sur Mac Firefox, mais pas Mac Chrome ni Mac Safari.
Existe-t-il un moyen de forcer les navigateurs à afficher les anciennes versions (monotones plates) à afficher?
Update : Il semble (d'après les commentaires ci-dessous) qu'il existe un sélecteur de présentation de texte , FE0E, disponible pour appliquer text-vs-emoji. Le sélecteur est concaténé comme un suffixe sans espace sur le code du caractère, tel que ⌛︎ pour HTML hex ou \u231B\uFE0E pour JS. Cependant, il n'est tout simplement pas honoré par tous les navigateurs (par exemple Chrome et Edge).
6 answers
Ajouter les Unicode sélecteur de variante{[4] caractère} pour forcer le texte, VS15, ︎.
Cela force le caractère précédent à être rendu sous forme de texte plutôt que sous forme de symbole Emoji.
<p>︎</p>
Résultat: ︎
En savoir plus sur: Symbole Unicode sous forme de texte ou emoji
J'avais un caractère Unicode tel que span::before content. Chrome a utilisé "Segoe UI Emoji" comme police pour le rendre. Même lorsque j'ai défini la famille de polices sur "Segoe UI Symbol", cela n'a pas fonctionné.
Mais , lorsque j'ai défini la famille de polices sur "Segoe UI Symbol" explicitement pour le span::before, plutôt que juste pour le span, alors cela a fonctionné.
Les polices Android ne sont pas riches comme vous pouvez vous y attendre. Les fichiers de police n'ont pas ces glyphes exotiques et Android a un hack pour quelques caractères sans glyphe. Ils sont remplacés par des icônes.
La solution consiste donc à intégrer le site avec une police web (woff). Créez un nouveau fichier de police avec FontForge et choisissez le glyphe requis dans free serif TTF par exemple. Chaque glyphe prend 1k. Générer un fichier woff.
Préparer CSS simple pour importer la police personnalisée famille.
Style.css:
@font-face {
font-family: 'Exotic Icons';
src: url('exotic-icons.woff') format('woff');
}
.exotic-symbol-font {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Exotic Icons';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Index.fichier html:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"></head>
<title>Test custom glyphs</title>
</head>
<body>
<table>
<tr>
<td class="exotic-symbol-font">
☠ ♠ a g
</td>
</tr>
</table>
</body>
</html>
Pour moi sur OSX, la solution consistait à définir font-family sur EmojiSymbols
Aucune des solutions ci-dessus n'a fonctionné pour l'extension "Emoji pour Google Chrome".
J'ai donc fait une capture d'écran du caractère Unicode 'BALLOT BOX WITH CHECK' (U+2611) et l'ai ajouté en tant qu'image avec php:
$ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # ☑ or /U2611
Voir: https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel
Je ne connais pas de moyen de désactiver le rendu de type emoji. Habituellement j'utilise une icône de la police telle que font awesome ou glyphicons (livré avec Bootstrap 3).
L'avantage de les utiliser sur les caractères unicode est que
- vous pouvez choisir parmi de nombreux styles différents afin qu'il s'adapte à la conception de votre site;
- ils sont cohérents entre les navigateurs (si vous avez déjà essayé de faire un caractère étoile unicode, vous remarquerez que c'est différent dans IE vs other le navigateur);
- de plus, ils sont entièrement stylables, comme les caractères unicode que vous essayez d'utiliser.
Le seul inconvénient est que c'est une chose de plus pour le navigateur à télécharger quand ils voient votre page.