font-palette 属性仅对支持 colrv1 或 opentype-svg 的彩色字体生效，不适用于普通 ttf/otf 字体；需满足字体内置调色板、浏览器支持（chrome 110+/edge 110+/firefox 112+）且正确声明 font-family 与 font-palette 名称匹配。
font-palette 属性只在支持彩色字体的格式中生效
font-palette 不是通用字体颜色控制开关，它专为 OpenType-SVG 或 COLRv1 字体设计。如果你用的是普通 TTF/OTF（比如系统默认的 Arial、思源黑体），哪怕写了 font-palette: dark; 也完全没反应——浏览器直接忽略该声明。验证方式很简单：打开 Chrome DevTools → Elements 面板 → 查看 computed 样式里 font-palette 是否显示为“not set”或灰色禁用状态。
真正起作用的前提有三个：
• 字体文件本身内嵌了至少两个命名调色板（如 light、dark、accent-blue）；
• 页面加载的是支持 COLRv1 的字体（例如 Google Fonts 提供的某些实验性彩色字体）；
• 浏览器支持（Chrome 110+、Edge 110+、Firefox 112+ 支持 COLRv1；Safari 目前不支持）。
如何正确声明并切换预定义调色板
语法非常直白：font-palette 后跟一个标识符，对应字体中定义的调色板名。这个名称大小写敏感，且不能加引号：
h1 {
font-family: "Noto Color Emoji";
font-palette: dark;
}
常见可选值取决于字体作者定义，典型包括：
• light（浅色背景适配）
• dark（深色背景适配）
• default（等同于不设 font-palette）
• 自定义名如 high-contrast、sepia（需查字体文档确认）
注意：font-palette 无法用 CSS 变量动态赋值（font-palette: var(--theme); 无效），也不能用 @media 直接切换——必须配合类名或 JS 操作 className 才能响应式切换。
用 JavaScript 切换时容易漏掉的兼容性细节
直接改 element.style.fontPalette = 'dark'; 在部分旧版 Chromium 中可能不触发重绘，更稳妥的方式是操作 class：
.text--dark { font-palette: dark; }
.text--light { font-palette: light; }
然后用 JS 控制：
• el.classList.replace('text--light', 'text--dark');
• 或先 el.classList.remove() 再 add()
关键点：
• 不要依赖 getComputedStyle(el).fontPalette 判断当前值——它返回空字符串或 normal，而非实际生效的调色板名；
• 切换后若颜色没变，优先检查字体是否真被加载成功（Network 面板看字体请求状态码和 MIME 类型是否为 font/collection 或 font/woff2 并含 COLR 表）；
• Firefox 虽支持 COLRv1，但对 font-palette 的实现稍晚于 Chrome，建议用 @supports (font-palette: dark) 做特性检测再启用逻辑。
调试时最常遇到的“颜色没变”原因
不是代码写错了，而是底层链路断了：
• 字体未启用 COLRv1 渲染（比如用了降级的 SVG 彩色字体，font-palette 对其无效）；
• 字体文件里根本没定义多个调色板（可用 opentype.js 字体检查工具 查看 CPAL 表内容）；
• 元素设置了 color 或 fill，覆盖了调色板对字形填充色的控制（COLRv1 字体中，color 仅影响非彩色层，而 font-palette 控制的是调色板索引映射，二者机制不同，但视觉上可能冲突）；
• 使用了 font-feature-settings: "cpal" 1; 等手动开启 CPAL 的写法——现代浏览器已不需要，反而可能干扰自动行为。
调色板切换这件事，表面是 CSS 属性，实际是字体、渲染引擎、CSS 解析三者对齐的结果。任何一个环节没对上，就只是个静静躺在样式表里的无效声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
