为何HTML的lang属性会影响字符的显示效果？

核心原因 #

浏览器会根据lang属性指定的语言环境，自动选择适配的字体（或字体中的语言特定字形），这就是不同lang值下同一字符显示有差异的关键。

具体细节拆解 #

• 浏览器默认字体栈的语言适配逻辑
  系统和浏览器的默认字体栈不是单一字体，而是按语言分组的优先级列表。比如：

  • 当lang="zh"时，浏览器会优先调用简体中文字体（如Windows的微软雅黑、Mac的PingFang SC）；
  • lang="zh-tw"会优先选择繁体中文字体（如Windows的微软正黑体、Mac的PingFang TC）；
  • lang="ja"则会调用日文字体（如Windows的Meiryo、Mac的Noto Sans JP）。
    中日韩共用的汉字（比如示例里的“才”）在不同语言的字体中，字形设计往往有细微差异（日文写法更扁，繁体中文的笔画细节和简体不同），最终显示效果自然不同。

• 指定font-family后显示一致的原因
  当你明确指定某个字体（比如font-family: "Noto Sans SC"），浏览器会强制使用该字体的字形渲染所有字符，不再根据lang属性切换字体或字形变体。只要这个字体包含目标字符的字形，所有lang下的显示就会统一。

• 部分字体内置多语言字形变体
  像Noto Sans CJK这类跨语言字体，本身就内置了同一字符的多种语言适配字形。此时浏览器不需要切换字体，仅根据lang属性调用该字体对应的语言字形，同样会出现显示差异。

示例代码 #

<html>
<p lang="zh">lang=zh: 才 Aa</p>
<p lang="zh-tw">lang=zh-tw: 才 Aa</p>
<p lang="ja">lang=ja: 才 Aa</p>
</html>

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