设置元素的语言属性会导致子级出现 unicode 字符样式错误

Question

问题：有没有一种正确的方法来设置页面语言，以便在使用 unicode 字符时不会导致一堆样式回归？或者有一个简单的解决方法，不涉及在我们的 css 中散布一堆:lang伪选择器，这是一个非常低效的解决方案？我有过的其他不吸引人的想法：停止使用Unicode字符，改用图标。在我们庞大而成熟的代码库中，这并不容易。

更新：这是一个新的可运行示例。似乎只有一些 unicode 字符有这个问题，而且只有一些字体。

body {
font-family: serif;
}

<h3>Blackjack advice (Unicode dabblings)</h3>
<p lang="en-US">If you draw ♤, alway hit</p>
<p lang="zh-Hans">如果你画 ♤，总是打</p>
<p lang="en-US">If you draw ●, alway hit</p>
<p lang="zh-Hans">如果你画 ●，总是打</p>
<p lang="en-US">If you draw ❦, alway hit</p>
<p lang="zh-Hans">如果你画 ❦，总是打</p>
<p lang="en-US">If you draw 𝄞, alway hit</p>
<p lang="zh-Hans">如果你画 𝄞，总是打</p>
Why is ● so large in Chinese? Interestingly, changing font-family to sans-serif normalizes the size (at least in my current context, Chrome/Windows).

Answer 1

从规范：

用户代理可以使用元素的语言来确定适当的处理或呈现(例如，在选择适当的字体或发音时，用于字典选择，或用于表单控件(如日期选择器(的用户界面(。

您要求您获得一种适合呈现简体中文的字体，浏览器/操作系统做到了，碰巧这种字体(至少在您的系统上(具有不同样式的●字形。

我建议将您感兴趣的符号包装在一个单独的标签中，使用它来覆盖字体以最适合字体(也许是用于精细控制大小/样式的 CSS 字体(，并以此为一个绝佳的机会给它们某种替代文本/标题，因为就我个人而言，我已经不知道在您的示例中圆圈是俱乐部还是钻石， 因为音符在我所知道的任何解释中看起来都不像这些套装中的任何一个。

body {
font-family: serif;
}
abbr.ico {
font-family: sans-serif;
}

<h3>Blackjack advice (Unicode dabblings)</h3>
<p lang="en-US">If you draw ●, alway hit</p>
<p lang="ru-RU">Если вам попался ●, ходите</p>
<p lang="zh-Hans">If you draw ●, alway hit</p>
<p lang="zh-Hans">如果你画 ●，总是打
<br>If you draw ●, alway hit</p>
<p lang="en-US">If you draw <abbr class="ico" title="a circle?">●</abbr>, alway hit</p>
<p lang="zh-Hans">如果你画 <abbr class="ico" title="a circle?">●</abbr>，总是打</p>