CSS中通过[lang="zh-CN"]等标准BCP 47属性选择器触发字体切换，需HTML元素正确设置lang属性；中日韩字体应按语言分层声明，优先使用系统专属字体并严格排序；@font-face须按语言拆包+unicode-range精准控制；font-feature-settings需按lang细粒度配置以适配地域字形。
lang属性在CSS里怎么触发字体切换
直接用 [lang="zh"] 或 [lang="ja"] 这类属性选择器就行，不是靠 class 或 data-*。浏览器会读取 HTML 根元素或具体元素的 lang 属性值，然后匹配对应 CSS 规则——前提是该元素确实带了合法的 lang 值，比如 <p lang="zh-CN">，而不是空着或写成 lang="chinese" 这种非标准值。
常见错误现象：[lang="zh"] 写了但没生效，八成是 HTML 里漏写了 lang，或者写成了 language="zh"（无效）；也可能是父元素设置了 lang，但子元素没继承（lang 默认可继承，但若子元素自己设了别的值，就会覆盖）。
- 必须用标准 BCP 47 语言标签，如
zh-CN、ja-JP、ko-KR，不能简写为zh（虽然部分浏览器能 fallback，但不保证） - 匹配是精确的：
[lang="zh-CN"]不会匹配lang="zh"，但[lang^="zh"]可以（慎用，可能误伤） - 推荐优先给
html标签设lang，再配合:root [lang] {}做全局控制，避免每个元素都加
font-family里中日韩字体怎么安全排列
不能只写一个“微软雅黑”或“Noto Sans CJK”，得按语言特性分层声明，否则中文里混的日文汉字可能用错字形，或英文标点被中文字体强行渲染导致粗细/间距异常。
关键点在于：字体列表里，**语言专属字体要放在通用字体之前，且同一语种内按字重、字宽、兼容性排序**。比如日文需要 Hiragino Kaku Gothic Pro 或 Yu Gothic，中文要 Microsoft YaHei 或 PingFang SC，而西文仍走 system-ui 或 -apple-system。
立即学习“前端免费学习笔记（深入）”；
- 典型写法：
font-family: "Helvetica Neue", "PingFang SC", "Hiragino Kaku Gothic Pro", "Noto Sans CJK SC", sans-serif; - 注意顺序：Mac 上
PingFang SC和Hiragino都存在，但前者对简体中文更优，后者对日文假名更准，所以把PingFang SC放前面，Hiragino紧随其后作 fallback - 避免用
SimSun或NSimSun：Windows 旧版宋体缺乏 OpenType 特性，对现代排版支持差，容易崩标点宽度
@font-face加载多语言字体时的坑
用 @font-face 加载 Noto Sans CJK 这类全量字体时，文件体积大（单个 woff2 超 10MB），且不同语言子集（SC/T/JP/KR）不能靠 unicode-range 自动切分——你得手动拆包，否则用户下的是整套，白耗流量。
真正可行的做法是：按语言拆成多个 @font-face 块，每块指定 unicode-range 和对应 src，再配合 [lang] 选择器调用。否则即使写了 [lang="ja"] { font-family: "NotoJP"; }，浏览器仍可能因字体未加载或范围不匹配，退回到系统字体。
-
unicode-range必须写对：日文平假名是U+3040-309F，片假名是U+30A0-30FF，不能漏掉U+31F0-31FF（小写片假名）等扩展区 - 字体文件名别用
NotoSansCJK.woff2这种统一名字，改用NotoSansCJK-SC.woff2，避免缓存混淆 - 别依赖
font-display: swap就万事大吉——中日韩字体 swap 期间容易闪动，建议搭配size-adjust或font-optical-sizing: auto减少重排
lang属性和font-feature-settings冲突怎么办
当用了 font-feature-settings: "ss01" 这类 OpenType 特性后，某些中文字体（如 Source Han Sans）会强制启用特定字形变体，结果导致日文用户看到的汉字跟本地习惯不符——比如日本用「令和」的「令」字形，却被中文版字体替换成大陆写法。
这不是 bug，是字体设计本身决定的。解决方案不是关掉特性，而是**按 lang 细粒度控制**：用 [lang="ja"] { font-feature-settings: "jp78"; } 显式启用日本 JIS 标准字形，[lang="zh-CN"] 则用 "cn20" 或保持默认。
- 查字体支持的特性码要翻官方文档，比如 Adobe 的 Source Han 系列有完整
font-feature-settings映射表，不能凭感觉写"liga"或"kern" -
font-variant-east-asian是更安全的替代方案（如font-variant-east-asian: jis78;），但兼容性略差，老版 Safari 不支持 - 别在全局
body上设font-feature-settings，否则所有语言都会被同一套规则覆盖
最麻烦的其实是字体厂商——同一款字体，SC/T/JP/KR 四个版本的 OpenType 表结构未必一致，有些甚至故意删了某些特性开关。上线前真得拿真实文本测，光看字体名和文档容易翻车。
