Détecter la prise en charge des caractères du navigateur en javascript?

je travaille sur un site lié à la musique, et j'utilise fréquemment les caractères spéciaux HTML pour sharps (փ) et flats (փ) pour garder les choses jolies, par exemple:

♯
♭

cependant, j'ai remarqué que dans certains navigateurs (IE6, Safari pour PC) ces caractères ne sont pas pris en charge. J'ai créé un javascript conditionnel qui sert des caractères clairs et supportés à la place des caractères spéciaux ( G# pour G et BB pour b ). Mais j'ai du mal à trouver comment détecter les navigateurs qui manquent ces caractères.

je sais que j'ai pu tester pour le navigateur (ie6 par exemple), mais je m'attendais à bien faire les choses et de test pour les prise en charge des caractères lui-même.

est-ce que quelqu'un connaît une bonne façon de faire ceci en utilisant soit javascript, jQuery, ou des rails? (La page est servie par une application rails, de sorte que l'objet request et toute autre magie Rails est sur la table.

24
demandé sur Chris Ladd 2011-01-08 22:24:11

4 réponses

si vous créez deux travées, l'une contenant le caractère que vous voulez, et l'autre contenant un caractère imprenable U+FFFD (փ փ) est un bon, alors vous pouvez tester si elles ont la même largeur.

<div style="visibility:hidden">
  <span id="char-to-check">&#9839;</span>
  <span id="not-renderable">&#xfffd;</span>
</div>
<script>
  alert(document.getElementById('char-to-check').offsetWidth ===
        document.getElementById('not-renderable').offsetWidth
        ? 'not supported' : 'supported');
</script>

vous devez vous assurer que le DIV N'est pas stylé en utilisant une police fixe.

21
répondu Mike Samuel 2011-01-08 19:39:51

"prise en charge du Navigateur" n'est pas le problème ici. Vous devez être service de vos fichiers UTF-8*, et utilisez les caractères appropriés plutôt que les entités HTML.

  • symbole Unicode sharp: փ (u+266F)
  • Unicode flat symbol: chan (U+266D)

vous devez aussi vous assurer de enregistrer vos fichiers en UTF-8 (et pas, disons, ASCII ou ISO-8859-1).

Voir aussi: doit-être-dessus Joel on Logiciel: le Minimum absolu chaque développeur de logiciel absolument, positivement doit savoir sur Unicode et les jeux de caractères (pas D'Excuses!).

* Je ne suis pas un gars des Rails, mais je pense que ça fait ça par défaut.

3
répondu Matt Ball 2011-01-08 19:35:21

plutôt que de vous balader avec JavaScript, vous devriez plutôt utiliser unicode-range:

@font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  local("Segoe UI Symbol"),
        local("Symbola"),
        url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
  unicode-range: U+266F, U+266D; /* Define the available characters */
}

body {
  font-family: 'MyWebFont', Arial;
}
&#9839;
&#9837;
Normal text

Dans le local blocks, définissez les polices que les gens peuvent avoir installées localement et contenir les symboles que vous voulez (comme le symbole D'UI Segoe de Window). Ensuite, définissez une police web (Je suggère Symbola) contenant le symbole que vous souhaitez afficher.

la directive unicode-range indique le support les navigateurs (IE9 et jusqu') de ne pas télécharger la police à moins que les symboles spécifiés ne soient présents sur la page (vous pouvez trouver leur numéro unicode en cherchant Unicode-Tables.)

S'ils ont déjà la police, ils ne la téléchargeront pas. Si le(S) symbole (s) ne sont pas présents sur la page et votre navigateur n'est pas plus vieux que la saleté, la police ne sera pas téléchargé. Il ne sera téléchargé qu'en cas de besoin.

(si vous voulez encore supporter L'ancienne IE, utilisez fontsquirrel pour générer votre déclaration initiale @font-face, ajoutez ensuite le local et unicode-range les pièces vous-même.

0
répondu Sora2455 2018-09-08 02:36:13

Ajouter ceci à votre HTML

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 

</head>

et vérifiez si IE et Safari rendent la page correcte.

-1
répondu Nerian 2014-04-17 19:12:25