如何在网页上使用 Unicode 符号？答案

【问题标题】：How to use Unicode symbols on webpages?如何在网页上使用 Unicode 符号？
【发布时间】：2010-08-31 19:20:29
【问题描述】：

我正在制作的网页上使用了一些 Unicode 符号。就本示例而言，假设是这个人：'☺'。

据我了解，在 CSS 的正确实现下，您可以设置任何您想要的字体，如果遇到该字体中不存在的字符，它将开始通过 font-family 备份选择回退直到找到一个有效的。

鉴于此，我在 css 中设置了这样的字体系列：

font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif

我的理由是 Tahoma 与 Windows 捆绑在一起。但是，我在网上发现只有某些版本的 Windows 捆绑的 Tahoma 支持 Unicode。 Helvetica 是一种类似于 Mac 的 Tahoma 的字体。 “Arial Unicode MS”与 Office 2000 及更高版本捆绑在一起，并且绝对支持 Unicode。 San-serif 是所有情况下的后备，也有望支持 Unicode。

在大多数情况下，这很有效。然而，正如往常一样，Internet Explorer 似乎正在破坏我精心设计的计划。我无法弄清楚模式是什么，因为我在一台运行 Vista 和 IE8 的计算机上看到它，另一台在 Windows XP 上用 IE7 看到它，但它在我的 Win7 和 IE8/IE7 Tester/IE6 的开发机器上运行良好测试仪。我在一些晦涩的网页上发现了在旧版本 IE 上的声明，它只会查找它拥有的第一个字体，然后将其用于所有内容，即使该字体缺少给定的符号，但这并不解释为什么它发生在 Vista/IE8 上。因此，我可爱的 Unicode 符号对某些但不是所有 IE 用户显示为框。

在网络上处理 Unicode 符号的推荐方法是什么？ 它们是否不适用于需要广泛浏览器兼容性的项目？我是否应该寻找专门用于处理旧 IE 的代码？还有其他我应该担心的问题或平台吗？

编辑：更新了有关失败的系统的新信息。

【问题讨论】：

我的建议是让您的用户升级到现代浏览器，但我已经知道该建议会获得多大的吸引力。除此之外，我所知道的唯一万无一失的方法是使用图像而不是 Unicode 字符。
@Robert Harvey 哦，我确实在这样做。不幸的是，我认为我遇到这个问题的主要群体是无法控制浏览器的工作人员。

标签： unicode cross-browser

【解决方案1】：

只有某些版本的 Windows 捆绑的 Tahoma 支持 Unicode

这并不是真正的“Unicode 支持”。 Tahoma 支持 Unicode，因为它具有 Unicode 代码点查找表。这并不意味着您会得到 Unicode 定义的每个字符的字形...实际上几乎没有字体具有每个字符的字形。

没有版本的 Tahoma 包含 U+263A White Smiling Face 的字形，因此您的代码是对字体回退功能的测试，与其他浏览器相比，IE（尤其是 IE6）不擅长这一点. 确实包含 U+26A3 的更常见的 Windows 捆绑字体是纯 Arial（不是“Arial Unicode”），因为版本 3.00（包含在 WinXP 中）。

【讨论】：

【解决方案2】：

您可以在 CSS 文件中使用 IE 覆盖来为旧版本的 Internet Explorer 创建不同的行为。根据 Internet Explorer 的版本，每个语句之前的覆盖是 # 和 _。

在 Internet Explorer 6.0 及更早版本的 CSS 中的每个语句之前添加 _ 在您的 css 中的每个语句之前放置一个 # 仅适用于 Internet Explorer

例子：

 //Normal
    font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif;    
    //  IE 6.0 Earlier
    _font-family: Tahoma, Helvetica, sans-serif;
    // IE Only
    #font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif;

【讨论】：

这是无效的 CSS，可能会混淆其他浏览器。

【解决方案3】：

据我了解，在 CSS 的正确实现下，您可以设置任何您想要的字体，如果遇到该字体中不存在的字符，它将开始通过 font-family 备份选择回退直到找到一个有效的。

不幸的是，它在 Internet Explorer 中不是这样工作的，至少在旧版本中不是这样。这些浏览器仅使用系统上可用的第一个字体系列。我有时使用的一种方法是为 Unicode 字符添加一个单独的 CSS 类：

<span class="unicode">[Unicode character]</span>

.unicode { font-family: "Lucida Sans Unicode", ..., sans-serif; }

我发现 Lucida Sans Unicode 是一个不错的选择，因为它已预装在自 Windows 98 以来的所有 Windows 版本中。不过，它的 Unicode 支持并不像您期望的那样完整。

但我开始更喜欢图标字体。它们的优点是，无论实际使用的字体如何，字形看起来总是一样的。正如 John Slegers 在他的回答中提到的，有很多很棒的在线工具可以创建您自己的自定义图标字体。

【讨论】：