html - 设置元素的语言属性会导致子元素出现 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

来自 specification :

User agents may use the element's language to determine proper processing or rendering (e.g. in the selection of appropriate fonts or pronunciations, for dictionary selection, or for the user interfaces of form controls such as date pickers).

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

我建议将您感兴趣的符号包装在一个单独的标签中，用它来覆盖最合适的字体(也许是一种 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>