在javascript中检测浏览器字符支持？

Question

我正在开发一个音乐相关的网站,经常使用HTML特殊字符锐利(♯)和平面(♭)来保持漂亮,例如:

♯
♭

但是,我注意到在某些浏览器(IE6,Safari for PC)中,这些字符不受支持.我已经创建了一个条件javascript,它提供普通的,支持的字符来代替特殊的字符(G#为G♯而Bb为B♭).但我很难弄清楚如何检测哪些浏览器缺少这些字符.

我知道我可以测试浏览器(例如ie6),但我希望做正确的事情并测试角色支持本身.

有没有人知道使用javascript,jQuery或rails执行此操作的好方法？(该页面由rails应用程序提供,因此请求对象和任何其他Rails魔法都在桌面上.

Answer 1

如果你创建两个SPAN,一个包含你想要的字符,另一个包含一个不可打印的字符U + FFFD( )是一个好的SPAN,那么你可以测试它们是否具有相同的宽度.

<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>

您应该确保DIV没有使用固定字体设置样式.