html - 为什么 ⌘ 在 Chrome 和 Firefox 中的中文代码显示较小？

Question

在 Firefox 和 Chrome(但不是 Safari)上，以下 HTML 以非常不同的字体大小显示相同的符号。

<div lang="en">⌘</div>
<div lang="zh">⌘</div>

1. 为什么？
2. 我能做些什么来对抗它？我目前的解决方法是做 <span lang="en">⌘</span>在中文页面上。但这感觉不对。
3. 我在 OS X (El Capitan) 10.11.6 上观察到这一点。它在 Windows 上看起来如何？

注意:

• 您可能根本无法在您的操作系统(例如 Android)上看到该符号。所以我的意思是命令键(unicode)符号:https://en.wikipedia.org/wiki/Command_key
• 在 iOS 上看起来不错(根据 Andrew 的说法，Safari 和 Chrome)。

Answer 1

至少在 OS X 上，这是一个字体问题。

符号“⌘”仅由少数字体提供。其中包括:系统字体 Lucida Grande 和简体中文字体 Heiti SC。由于它们是不同的字体，我们不能指望 ⌘ 的渲染是相同的。

如果您选择的字体(比如 Arial)不包含符号“⌘”，渲染引擎将尝试找到包含它的替代字体。

Firefox 和 Chrome 似乎考虑了 lang。因此，为英文 ⌘ 选择了 Lucida Grande 字形，为中文 ⌘ 选择了 Heiti SC。

这可以通过在字体系列列表中添加所需的字体来解决:

<p style="font-family: Arial, sans-serif"> 
<span lang=en>english ⌘</span><span lang=zh>⌘ 中文</span> 
</p>
<p style="font-family: Arial, 'Lucida Grande', sans-serif"> 
<span lang=en>english ⌘</span><span lang=zh>⌘ 中文</span>
</p>