font-variant-east-asian 能触发字体内置的东亚变体（如简→繁、全角/半角、日文假名样式），但不能翻译、生成字形或影响非CJK文字；其生效严格依赖字体是否含对应OpenType特性，且不改变DOM内容与文本度量。
font-variant-east-asian 能做什么、不能做什么
这个属性只对**字体本身包含对应 OpenType 特性**的东亚字符生效，比如简体→繁体切换、全角/半角宽度控制、日文假名样式等。它不是“翻译”或“字形生成”，而是告诉浏览器：“请从当前字体里启用繁体变体字形”——如果字体没内置繁体字形（如 Windows 默认的 Microsoft YaHei），那 font-variant-east-asian: traditional 就完全没反应。
常见错误现象：font-variant-east-asian: traditional 在 Windows Chrome 里不生效；Android 设备上文字毫无变化；页面混排日文汉字时，部分字仍显示简体形态。
- 仅在 macOS/iOS 的
PingFang SC、Hiragino Kaku Gothic Pro，或 Windows 上手动安装的PingFang SC等少数字体中稳定支持traditional/proportional-width -
font-variant-east-asian对越南语、蒙古语、藏语等非 CJK 表意文字无效——它们依赖font-feature-settings或字体本身设计 - 该属性不改变 DOM 文本内容，只影响渲染层；SEO 和可访问性仍以原始 HTML 文本为准
怎么写才真正触发繁体变体
必须同时满足三个条件：HTML 元素带合法 lang 值、CSS 指定支持该变体的字体、属性值语法正确。最简可行写法是：
body {
font-family: "PingFang SC", "Hiragino Kaku Gothic Pro", sans-serif;
font-variant-east-asian: traditional;
}
但要注意：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
lang属性要设在有效元素上，推荐直接写在——仅靠[lang^="zh"]选择器无法触发变体，必须精确匹配字体支持的语言标签 - 不要用
font-variant: traditional（这是旧写法，已废弃）；必须用完整属性名font-variant-east-asian - 若页面同时存在简繁内容，应避免全局设置，改用局部容器，例如：
<div lang="zh-Hant" class="text-traditional"> + 对应 CSS 规则 <h3>为什么 [lang="zh-Hant"] + font-variant-east-asian 还是不切换</h3> <p>大概率是字体链没对上。浏览器按 <code>font-family列表从左到右匹配，一旦某个字体加载成功且能渲染全部字符，就不会继续 fallback。如果"Noto Sans CJK SC"排在"PingFang SC"前面，而前者不支持traditional变体，那整个声明就失效了。安全写法示例：
:root { --font-zh-hans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-zh-hant: "PingFang TC", "PingFang SC", "Hiragino Kaku Gothic Pro", sans-serif; } [lang="zh-Hans"] { font-family: var(--font-zh-hans); } [lang="zh-Hant"] { font-family: var(--font-zh-hant); font-variant-east-asian: traditional; }-
PingFang TC是专为繁体优化的苹方字体，比PingFang SC更可靠；若未安装，会 fallback 到后者（仍可能生效） - 不要省略
sans-serif作为兜底，否则某些字符可能渲染为系统默认衬线体，破坏一致性 - Windows 用户若想测试效果，需确认已安装
PingFang SC字体文件（.ttf/.otf），仅靠浏览器 UA 检测无用
替代方案：当 font-variant-east-asian 不可用时
多数生产环境不能依赖用户设备字体，所以更可控的方式是用
@font-face+unicode-range拆分字体子集，并配合[lang]控制加载。例如：@font-face { font-family: "NotoSansCJK-ZH-HANT"; src: url("noto-zh-hant.woff2") format("woff2"); unicode-range: U+4E00-9FFF, U+3400-4DBF, U+20000-2A6DF; } [lang="zh-Hant"] { font-family: "NotoSansCJK-ZH-HANT", sans-serif; }这种方式绕过了
font-variant-east-asian的字体依赖限制，但代价是体积和维护成本上升。真正需要“一键切换”的场景，往往得接受平台差异——这不是 bug，是 OpenType 字体生态的现状。最容易被忽略的一点：即使所有条件都满足，
font-variant-east-asian的效果也只在字体渲染管线中生效，它不改变文本测量、换行逻辑或 line-height 计算。如果你发现切换后出现行高塌陷或基线偏移，问题大概率出在字体本身的 vertical metrics 设计，而不是 CSS 写错了。 -
