设置元素lang属性导致子元素Unicode字符样式异常问题

首先得明确问题根源：浏览器会根据元素的lang属性自动匹配对应语言的优先字体，而很多Unicode字符在中文字体和西文字体中的设计规格（比如尺寸、笔画粗细）差异极大——比如你示例里的●，在中文宋体（serif族）里的尺寸远大于西文Times New Roman里的版本，这就导致了lang切换时的样式退化。

下面给你几个不需要大量使用:lang伪类，也不用替换成图标的简便方案：

1. 用unicode-range精准指定Unicode字符的字体 #

这是最精准的方案，只针对你用到的那些Unicode字符统一字体，不会影响其他文本：

/* 给目标Unicode字符单独设置字体栈，确保跨语言渲染一致 */
.unicode-char {
  /* 匹配你用到的字符：●(U+25CF)、♤(U+2664)、❦(U+2766)、턞(U+D11E) */
  unicode-range: U+25CF, U+2664, U+2766, U+D11E;
  /* 选对Unicode支持好、跨语言尺寸一致的字体，比如Segoe UI Symbol、Arial Unicode MS */
  font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
}

然后在HTML里给这些Unicode字符套个类：

<p lang="en-US">If you draw <span class="unicode-char">♤</span>, always hit</p>
<p lang="zh-Hans">如果你画 <span class="unicode-char">●</span>，总是打</p>

如果你的代码库庞大，可以用正则批量替换给所有目标Unicode字符加上这个类，比替换成图标成本低很多。

2. 优化全局字体栈，减少跨语言差异 #

如果你不想给每个字符加类，可以调整全局的font-family，把跨语言兼容、对Unicode支持好的字体放在最前面：

body {
  /* Segoe UI 对多语言Unicode字符的渲染一致性很好，其次是微软雅黑，最后回退到系统sans-serif */
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

这样不管元素的lang是en-US还是zh-Hans，浏览器都会优先用Segoe UI渲染所有文本（包括Unicode字符），从根源上避免不同语言字体的差异。你之前发现换成sans-serif能统一尺寸，就是因为sans-serif族的中、西文字体对这类字符的设计更接近。

3. 针对serif字体的特殊处理 #

如果你的项目必须用serif字体，可以在字体栈里加入支持Unicode的跨语言serif字体，同时给Unicode字符单独指定sans-serif（因为serif的中、西文字体差异实在太大）：

body {
  font-family: "Georgia", "SimSun", serif;
}

/* 给Unicode字符强制用sans-serif字体 */
.unicode-char {
  font-family: "Segoe UI Symbol", sans-serif;
}

补充说明你示例里的现象 #

为什么●在中文环境下显示过大？因为当元素lang="zh-Hans"时，浏览器会优先加载中文字体（比如宋体）来渲染文本，而宋体里的●设计尺寸远大于西文serif字体（比如Times New Roman）里的同字符。换成sans-serif后，中文字体（比如微软雅黑）和西文字体（比如Arial）的●尺寸设计更接近，所以看起来统一了。

内容的提问来源于stack exchange，提问作者AlexMA