问题:有没有一种正确的方法来设置页面语言,以便在使用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).
最佳答案
从specification:
用户代理可以使用元素的语言来确定适当的处理或渲染(例如,在选择适当的字体或发音时,用于字典选择或用于表单控件(例如日期选择器)的用户界面)。
您要求获得一种适合渲染简体中文的字体,而浏览器/ OS确实需要这种字体,而且这种字体至少在您的系统上具有不同样式的●
字形。
我建议将您感兴趣的符号包装在一个单独的标签中,用它覆盖字体以使其最适合(也许是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>
关于html - 设置元素的语言属性会导致子代中的Unicode字符错误,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57557008/