纯CSS无法根据单元格内容数值自动缩放字号，必须用CSS变量+calc()配合JS动态注入data-heat属性并设置内联font-size，同时需处理table-layout:fixed冲突、系统字体放大干扰及视觉可分辨性约束。
用 CSS 自定义属性 + calc() 动态计算字号
纯 HTML 表格本身不支持根据单元格内容数值自动缩放字号，必须借助 CSS。核心思路是：把热度值作为自定义属性传入 style，再用 calc() 按比例生成 font-size。
常见错误是直接在 <td> 里写 style="font-size: {{value}}px" —— 这样无法响应式调整，且容易超出容器、破坏表格布局。
- 热度值建议归一化到 0–100 范围（比如原始数据除以最大值 × 100），避免
calc(12px + 0.8 * 250)这类失控计算 - 用
font-size: calc(12px + 0.16 * var(--heat, 0))，这样热度为 0 时最小 12px，满值 100 时为 28px，线性可控 - 务必加
min-font-size和max-font-size（需配合@supports或 JS fallback，因原生支持有限）
JavaScript 动态注入 style 属性更稳妥
当热度数据来自 API 或需实时更新时，CSS 自定义属性易出错——比如忘记设 --heat、拼写错误、或服务端未渲染该属性。
直接用 JS 遍历 <td class="heat-cell">，读取文本/数据属性，再设置内联 font-size 更可靠。
立即学习“前端免费学习笔记（深入）”；
- 推荐从
data-heat属性读值：<td data-heat="72">热门</td> - 用
parseFloat(cell.dataset.heat) || 0容错，避免NaN导致样式失效 - 字号范围建议锁定在
11px–26px，超出会挤压相邻单元格，尤其在固定布局table-layout: fixed下 - 别忘了重绘后触发
cell.style.fontSize = `${size}px`，而不是改textContent
避免 table-layout: fixed 与字号变化冲突
很多表格为了对齐列宽用了 table-layout: fixed，但动态字号会导致文字撑出单元格，甚至换行错位。
这不是字体问题，是 CSS 表格渲染机制限制：固定布局下，列宽由第一行决定，后续行字号变大后无法重新分配空间。
- 要么改用
table-layout: auto（但列宽不再严格一致） - 要么给
<td>加overflow: hidden; text-overflow: ellipsis; white-space: nowrap防溢出 - 或者用
transform: scale()替代font-size（注意会影响点击区域和 line-height，需同步调transform-origin）
移动端适配时字号缩放失效怎么办
在 iPhone Safari 或 Android Chrome 上，如果用户开启了「更大字体」系统设置，px 单位会被强制放大，导致热度映射失准，比如原本 14px 的“中热”可能变成 18px，和“高热”拉开不了差距。
解决办法不是禁用系统设置，而是改用相对单位并锚定基准。
- 把基准字号设为
1rem（对应根元素font-size），再用clamp()限定区间：font-size: clamp(0.75rem, calc(0.75rem + 0.1 * var(--heat, 0) * 1vw), 1.5rem) - 或者用
em基于父级<td>的字号缩放，更稳定 - 测试时务必开启 iOS「显示与文字大小」里的「更大字体」选项，观察是否仍能区分热度层级
真正难的不是算出字号，而是让不同热度在视觉上可分辨、不挤占空间、不被系统干预扭曲——这三个约束同时满足时，往往得放弃纯 CSS 方案，转而用 canvas 渲染或 SVG 文本。
