font-optical-sizing 用于启用支持 opentype 光学尺寸的可变字体自动切换字形，提升多字号下的可读性；需字体内置 opsz 轴，现代开源字体如 inter、ibm plex sans 支持，helvetica 等传统字体不支持；默认 auto，无需显式声明，仅对 @font-face 中启用的可变字体生效。
font-optical-sizing 不是“让字体变大变小”的功能，它只在支持 OpenType 光学尺寸（optical size）的可变字体上启用字形轮廓的自动切换，目的是让同一字体在不同字号下视觉更协调、更易读。
怎么确认你的字体支持 optical sizing
不是所有字体都带光学尺寸信息。现代开源字体如 Inter、IBM Plex Sans、Source Serif Pro、Recursive 已内置；而 Helvetica、Times New Roman、Microsoft YaHei 等传统字体不支持。
- 查字体文档或 GitHub 仓库的 FEATURES.md，关键词搜
opticalSize或opsz - 用浏览器 DevTools 的 Fonts 面板（Elements → Computed → Fonts）看是否列出
opsz轴 - 加载字体时显式声明
font-variation-settings: 'opsz' 16;测试能否生效（若无效，大概率不支持）
启用 font-optical-sizing 的写法和限制
该属性仅控制是否启用字体内置的光学尺寸逻辑，本身不改变字号、不触发重排，也不影响非可变字体。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 默认值就是
auto，所以多数情况无需手动写 —— 只要字体支持、且你用了支持的字号范围，浏览器会自动选形 - 强制关闭：用
font-optical-sizing: none;，适用于调试或想禁用自动切换的场景 - 只对
@font-face中声明了font-optical-sizing: auto（或未禁用）的字体生效；系统字体即使支持，也无法通过 CSS 控制 - 不兼容 IE 和旧版 Safari（
为什么加了 font-optical-sizing: auto 却没变化
最常见原因不是代码写错，而是底层条件没满足：
- 字体文件本身没打包
opsz轴（比如你用的是 Inter 的常规静态版本，而非 Inter Variable Font） - 你设的
font-size超出字体光学尺寸覆盖范围（例如某字体只提供8–72pt的光学变体，你写了font-size: 100px，就只能 fallback 到默认字形） - CSS 中其他规则覆盖了字体加载，比如
font-family回退到了不支持的系统字体 - 用了
font-variation-settings手动锁死了opsz值（如'opsz' 12），会绕过font-optical-sizing的自动行为
搭配 font-size 使用时的真实效果
光学尺寸不是“放大镜”，它不改变字体度量（ascent/descent/em-height），只微调字干粗细、字腔开合、衬线长度等视觉细节。实际差异需对照查看：
- 小字号（≤14px）：自动切到「caption」风格——笔画略粗、字腔略大、x-height 略高，提升屏显可读性
- 正文字号（16–24px）：切到「text」风格——平衡清晰与优雅，是大多数字体的默认设计重心
- 大标题（≥36px）：切到「display」风格——衬线更锐利、字重对比更强、细节更丰富，避免大字号下显得“发虚”
- 注意：这些切换是连续的，不是离散档位；不同字体的分界点和风格差异也不同，不能靠猜
真正起作用的前提只有一个：你正在用的字体文件里真有 opsz 轴，且被浏览器正确加载识别。其他所有 CSS 设置，都是在它之上锦上添花，而不是替代它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
