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;
}

但要注意：

• lang 属性要设在有效元素上，推荐直接写在 ——仅靠 [lang^="zh"] 选择器无法触发变体，必须精确匹配字体支持的语言标签
• 不要用 font-variant: traditional（这是旧写法，已废弃）；必须用完整属性名 font-variant-east-asian
• 若页面同时存在简繁内容，应避免全局设置，改用局部容器，例如：
  + 对应 CSS 规则

  为什么 [lang="zh-Hant"] + font-variant-east-asian 还是不切换

  大概率是字体链没对上。浏览器按 font-family 列表从左到右匹配，一旦某个字体加载成功且能渲染全部字符，就不会继续 fallback。如果 "Noto Sans CJK SC" 排在 "PingFang SC" 前面，而前者不支持 traditional 变体，那整个声明就失效了。

  

  htmlppt.skill

  把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

  下载

  安全写法示例：

  :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 写错了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！