在 IE6 中以不同大小呈现的 Unicode 字符答案

【问题标题】：Unicode character rendered at a different size in IE6在 IE6 中以不同大小呈现的 Unicode 字符
【发布时间】：2012-07-02 19:00:53
【问题描述】：

在 Web 应用程序中，我必须显示一个特殊的 unicode 字符，称为BLACK DIAMOND (U+25C6)（有关详细信息，请参阅here）。这是一个示例：◆

为页面定义的字体是Arial，大小为13px。

令人惊讶的是，与其他浏览器（FF、Chrome、...）相比，IE6 中的字符以更大的尺寸呈现。

这种奇怪的行为有什么原因吗？避免这种情况的解决方案是什么？

【问题讨论】：

标签： unicode fonts web internet-explorer-6

【解决方案1】：

这是因为您指定的字体中缺少指定的字符。因此，浏览器会为该字符寻找合适的字体，以便它仍然可以显示它。不同的浏览器选择不同的字体，因此您在每种浏览器上看到的字体都会略有不同。

一般而言，您无法避免这种情况，因为缺少字体在网络上很常见，因此您不能真正依赖用户计算机上存在的任何字体。不过，您可以尝试减轻它：

您可以将 U+25C6 放在一个跨度中，该跨度的样式可以使用具有该字符的不同但特定的字体（并且与您的主字体配合得很好）。
与上述相同，但分发包含字形的网络字体（WOFF 现在似乎是一个合理的选择）。这样您就可以更好地控制显示的内容。
远离指定备用字体，如 Arial Unicode MS。根本不要使用它们。
如果您只是追求 U+25C6 的外观并且不关心它实际上是文本形式，您可以使用图像或 CSS hack。

【讨论】：

你是对的。我以为 BLACK DIAMOND 是在 Arial 中定义的，但事实并非如此，只定义了 BLACK DIAMOND SUIT（看起来几乎一样，我第一次没有花时间阅读 Character Map 中的字符描述，只看到一颗钻石并认为它在那里...)。
哦，确实，使用另一个相似的字符，当然也可以；）
我最终使用了解决方案 1。我使用黑色菱形在页面上显示里程碑，而使用黑色菱形套装看起来很丑：D

【解决方案2】：

（由于它的长度，我将其作为答案而不是作为评论发布，即使它没有回答原始问题。）

困惑了一阵子后，我意识到浏览器会根据字符的顺序以不同的字体呈现 Unicode 字符。下面是使用 N-Ary Union (U+22C3)、? (U+1D54A) 和ℝ (U+211D) 的示例：

<p>?⋃</p>
<p>⋃?</p>
<p>ℝ⋃</p>
<p>⋃ℝ</p>

在我的 Mac 上，Chrome 使用STIXGeneral 呈现第一段，使用Apple Symbols 和STIXGeneral 呈现第二段，使用Menlo 和Apple Symbols 呈现第三段，仅使用Apple Symbols 呈现第四段. Firefox 使用STIXGeneral 呈现所有内容，除了第三段中的ℝ，它使用Geneva 呈现。

（当使用开发者工具检查元素时，Chrome 会在 Computed 选项卡的底部显示渲染字体。Firefox 在检查元素时有一个 Fonts 选项卡。我在 Safari 上找不到类似的东西，它由this answer确认。）

据我所知，这是一个简单的优化：如果字形存在于已为特定“文本节点”加载的字体中，请使用此字体。否则，搜索可以呈现此字形的另一种字体。有趣的是，我在 Visual Studio Code 和 Apple Pages 中也观察到了相同的行为（大 ⋃ 在 ? 之后，小⋃ 在 ? 之前）。

这种优化有一个微妙的安全隐患：如果您打印出一个文档并涂黑一些文本，那么后面的字符的呈现可以揭示有关被涂黑文本的信息。

（我将“文本节点”放在引号中，因为<span>?</span>⋃ 会导致相同的行为，而<span style="font-weight: bold;">?</span>⋃ 不会。）

【讨论】：