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>