Question

我正在处理与音乐相关的网站，并且经常使用HTML特殊字符作为锐利（♯）和平面（♭）以保持漂亮，例如：

&#9839;
&#9837;

但是，我注意到在某些浏览器（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没有使用固定字体设置样式。

Answer 2

“浏览器支持”不是问题所在。您应该以UTF-8 * 的形式提供文件，并使用相应的字符而不是HTML实体。

Unicode尖锐符号：♯（U + 266F）
Unicode扁平符号：♭（U + 266D）

您还应该确保以UTF-8保存文件（而不是ASCII或ISO-8859-1）。

另见：必须提到的Joel on Software: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)。

*我不是Rails的人，但我认为默认情况下会这样做。

Answer 3

您应该做的不是使用JavaScript，而是使用CSS的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

在local块中，定义人们可能已在本地安装的字体，并包含所需的符号（例如Window的Segoe UI符号）。然后定义包含要显示的符号的网络字体（建议使用Symbola）。

unicode-range指令告诉支持的浏览器（IE9 and up）不要下载字体，除非页面上存在指定的符号（您可以通过搜索Unicode-Tables来找到其unicode号。）

如果他们已经有了字体，则不会下载。如果页面上没有该符号，并且您的浏览器的年龄不早于污垢，则不会下载该字体。仅在需要时才下载。

（（如果您仍然希望支持旧版IE，请使用fontsquirrel生成您的初始@ font-face语句，然后自己添加local和unicode-range部分。

Answer 4

将此添加到您的HTML

<head>

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

</head>

并检查IE和Safari是否正确显示页面。

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

4 个答案: