font-optical-sizing 对表格小字号基本无效，因主流中文字体不支持 opsz 轴，仅少数西文可变字体在 ≥14px 且正确加载时才可能生效；提升清晰度应优先调整 font-size（≥13px）、line-height 和 text-shadow。
font-optical-sizing 对表格小字号根本不起作用？先确认字体是否支持
直接给 table 或 td 加 font-optical-sizing: auto 却没变化，90% 是因为底层字体不带 opsz 轴。主流中文字体（如 PingFang SC、Microsoft YaHei、Noto Sans CJK SC）全都不含光学尺寸信息，开了也白开。
真正可用的只有少数西文字体：比如 Inter、IBM Plex Sans、Source Serif Pro。如果你的表格用的是这些字体，并且是通过 @font-face 加载的**完整可变字体文件**（不是 Google Fonts 默认提供的静态切片），才可能生效。
- 检查方式：DevTools → Elements → Computed → Fonts 面板，看是否列出
opsz轴 - 验证加载的是可变版：比如
Inter-roman.var.woff2，而不是Inter-Regular.woff2 - 中文表格别硬套——换字体成本高，不如优先调
font-size和line-height
表格里小字号（≤12px）为什么更难看清？这不是 font-optical-sizing 能解决的问题
小字号下模糊、发虚，核心原因是系统渲染机制 + 字体设计重心偏移。光学尺寸只在 8–72pt 区间内微调字腔、x-height、衬线长度等细节，但对 ≤12px 的屏显文本，它无法补偿 Windows ClearType 或 macOS subpixel 渲染的固有局限。
实际效果上，即使字体支持 opsz，浏览器在 10px 下也只能 fallback 到 caption 变体——但这个变体本身是为印刷小字号优化的，未必适配屏幕像素网格。
立即学习“前端免费学习笔记（深入）”；
- 12px 及以下，
font-optical-sizing基本不可见差异，别花时间调试 - 真正提升清晰度的组合：增大
font-size（至少 13px）、设line-height: 1.2、加text-rendering: optimizeLegibility - Windows 下可试
-webkit-font-smoothing: antialiased，但仅限 Chrome/Edge，对粗细无改善
怎么写 CSS 才让表格小字体看起来更稳？绕过光学尺寸的实操方案
放弃依赖 font-optical-sizing 后，更可控的做法是用基础属性组合干预视觉表现。重点不是“让字变锐利”，而是“减少失真感”。
-
td, th { font-size: clamp(13px, 1.2vw, 14px); }—— 避免固定 12px 导致小屏糊成一片 -
td { line-height: 1.15; }—— 小字号下行距太大会割裂字形，略紧反而增强连贯性 -
td { text-shadow: 0 0 1px currentColor; }—— 极轻描边，对 13–14px 文字有稳定轮廓作用（慎用于深色背景） - 避免
font-weight: normal强制覆盖 —— 检查 computed 样式里是否被全局重置或 UI 库劫持了字重
如果非要试 font-optical-sizing，表格里最稳妥的写法是什么？
只在明确支持的字体 + 合理字号区间下启用，且必须绑定到具体字体声明链上，不能孤立设置。
正确示例：
body {
font-family: "IBM Plex Sans", sans-serif;
}
table {
font-optical-sizing: auto;
}
td {
font-size: 14px; /* ≥14px 才可能触发光学档位切换 */
}错误写法：
-
td { font-optical-sizing: auto; font-family: "PingFang SC"; }—— 中文字体不支持，属性无效 -
table { font-optical-sizing: auto; }但字体是通过font简写加载的，未声明@font-face支持变体 -
td { font-size: 10px; font-optical-sizing: auto; }—— 超出多数字体光学覆盖下限，直接 fallback
真正起效的边界很窄：字体得对、加载方式得对、字号得落在它内置的 opsz 范围内。表格场景里，优先级远低于调整 font-size 和排版密度。
