不能直接用 unicode-range 控制表格某列字体渲染，因其仅按字符 Unicode 码点匹配字体，不识别 DOM 结构或 CSS 类名；金额列含 ¥、全角逗号等多码点字符会导致 fallback 失效，须改用语义类名 + 预拆子集字体 + 显式 font-family 指定。
不能直接用 unicode-range 控制表格某列的字体渲染——它只作用于字符本身，不绑定 DOM 结构或 CSS 选择器。 想让表格中“金额列”用等宽字体、“姓名列”用中文字体，靠 unicode-range 是无效的。必须换思路：用语义化类名 + 字体回退策略 + 精确子集字体拆分。
为什么表格列无法用 unicode-range 单独控制
unicode-range 是 @font-face 的匹配规则，浏览器按「字符 Unicode 码点」决定用哪个字体，不是按「<td class="amount">」这种结构。哪怕你给金额列加了 class="monospace"，只要里面混了中文标点（如「¥」U+00A5）或全角数字（U+FF10–FF19），就可能触发中文字体匹配，破坏等宽效果。
- 浏览器不看 HTML 标签层级，只扫描文本内容逐字符匹配
unicode-range -
unicode-range: U+0030-0039, U+002E, U+002D（仅数字、小数点、负号）看似精准，但实际页面中几乎不可能只出现这几种字符——空格、货币符号、千分位逗号都会导致 fallback - 表格单元格里常有换行、缩进、隐藏字符（如
），这些也属于 Unicode 范围，容易漏配
unicode-range 在表格场景下真正能起作用的地方
它只在「纯字符级分流」时有效：比如整张表只含英文数字 + 中文标题，可拆两个字体文件，分别覆盖 U+0020-007F 和 U+4E00-9FFF，让浏览器自动选字。但前提是：同一单元格内不混用不同语系字符。
- ✅ 可行：标题行用中文（
U+4E00-9FFF），数据行全是 ASCII 数字（U+0030-0039），且不含任何中文标点 - ❌ 不可行：金额列写成「¥123,456.78」——
¥是 U+00A5（Latin-1 Supplement），，是 U+FF0C（全角逗号，属 CJK 范围），会跨多个unicode-range匹配，最终可能全部 fallback 到第一个声明的字体 - ⚠️ 注意：Safari 对
U+20000-2A6DF（扩展汉字）支持差，若表格含生僻姓氏，需额外声明或降级处理
表格列字体控制的实际可行方案
放弃用 unicode-range 绑定列，改用明确的 CSS 类 + 预拆字体子集 + 强制 font-family 优先级：
立即学习“前端免费学习笔记（深入）”；
- 给金额列加
class="num-col"，对应 CSS：.num-col { font-family: "Monaco", "SF Mono", monospace; }（不用自定义字体，避免子集复杂度） - 真要用自定义等宽字体？把该字体文件精简为仅含
U+0030-0039 U+002E U+002D U+002B U+0024 U+00A5 U+20AC等必要符号，再声明：@font-face { font-family:"NumFont"; src: url("num.woff2"); unicode-range: U+0024-002B, U+002D-002E, U+0030-0039, U+00A5, U+20AC; } - 中文字体列用
class="zh-col"，CSS 中写：font-family: "Noto Sans SC", "PingFang SC", sans-serif;，不依赖unicode-range回退——因为中文字体本身已覆盖所有常用汉字，没必要再切子集 - 关键：所有
@font-face的font-family名必须一致（如都叫"BodyFont"），否则浏览器无法叠加匹配；而实际应用时用不同类名强制指定不同font-family值
最易被忽略的一点：表格中看不见的字符比想象中多——比如从 Excel 复制粘贴进来的数据常带零宽空格（U+200B）、软连字符（U+00AD），它们不属于任何你声明的 unicode-range，会导致整列字体 fallback。上线前务必用 console.log(escape(document.querySelector('td').textContent)) 检查真实码点。
