font-variation-settings 生效需满足三条件：轴名加单引号、数值不带引号、字体文件声明 format('woff2-variations')；语法错误或缺失任一条件均导致失效，且与 font-weight 冲突时后者被忽略。
font-variation-settings 不是设了就能动的，必须满足三个硬条件：轴名用单引号、数值不带引号、字体文件本身带对应轴且声明了 format('woff2-variations')。
font-variation-settings 语法写错就完全失效
常见错误是把轴值当字符串或漏掉格式细节：
-
font-variation-settings: "wght" 400—— ❌ 双引号包轴名，浏览器直接忽略整条声明 -
font-variation-settings: 'wght' "400"—— ❌ 数值加引号，被当字符串，无法插值、动画卡顿 -
font-variation-settings: wght 400—— ❌ 轴名没引号，大小写敏感，wght≠WGT -
font-variation-settings: 'wght' 400, 'wdth' 100.5—— ✅ 正确：单引号+无引号数字，小数位统一
@font-face 声明里漏掉 format('woff2-variations') 会静默降级
Chrome 和 Edge 加载时不会报错，但 Firefox（尤其 115 之前）会当成普通 woff2 解析，导致 font-variation-settings 完全无效，font-weight 也只认离散值（如 400/700），无法响应 'wght' 537 这类连续值。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 务必在
src中显式写format('woff2-variations')，不能简写为format('woff2') - Google Fonts 链接默认不含
-variations，需手动把 URL 中的woff2替换为woff2-variations - 若提供 fallback 字体，要用独立
@font-face块，并靠font-weight和font-style区分作用域，避免混用
动画不平滑？问题不在字体，而在插值控制权没交出去
浏览器默认把 font-variation-settings 当作字符串处理，@keyframes 里从 'wght' 100 到 'wght' 900 是硬切，不是渐变。
- 必须显式加
animation-timing-function: linear或缓动函数，否则ease会让中间段更突兀 - 起止值小数位要一致：
'wght' 400.0和'wght' 400.00在部分 Chromium 版本中会被判为不同类型，中断插值 - 别在
@keyframes里写font-variation-settings: normal—— 这会重置所有轴，其他正在调的轴（比如'wdth'）会意外跳回默认值 - 想用 CSS 变量驱动？必须先用
@property注册：@property --weight { syntax: "<number>"; inherits: false; }</number>，否则var(--weight)在动画中只是字符串，不参与数值插值
font-weight 和 font-variation-settings 同时存在时，后者永远胜出
很多人以为 font-weight: bold 是语义层，font-variation-settings 是表现层，能共存。实际不是：
-
font-variation-settings: 'wght' 350一旦出现，font-weight就彻底被忽略，连可访问性工具都读不到“加粗”语义 - 不要用
font-variation-settings替代font-weight做主控逻辑，它只适合微调（比如同一段文字里某个词临时加粗） - 旧版 Safari 对
font-weight的兼容性更好，若需兼顾，优先用标准属性，仅在支持环境里叠加font-variation-settings做精细调节
最容易被忽略的是 font-optical-sizing: none —— 它不报错、不警告，但会在小字号下悄悄叠加光学补偿，让你调的 'wght' 300 看起来像 400。真要精确控制，这行必须关掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
