如何在HTML表格中通过font-stretch属性调整表格内文字的拉伸度-html教程-PHP中文网

font-stretch 在 html 表格中无效，主因是所用字体不支持 wdth 轴或未正确声明可变字体；需确保字体文件含宽度轴、@font-face 声明含 supports variations 且指定 font-stretch 范围，并作用于 td/th 等文本容器而非 table。

如何在html表格中通过font-stretch属性调整表格内文字的拉伸度

font-stretch 在 HTML 表格中不会“拉伸文字几何形状”，它只在字体本身支持宽度轴（wdth）或提供多个静态宽度变体时才起作用；对 table、td、th 元素直接设 font-stretch: condensed，若字体不满足前提条件，视觉上毫无变化。

为什么表格里设了 `font-stretch` 却没反应

绝大多数失效不是 CSS 写错，而是底层链路断了：

你用的字体（如 "Microsoft YaHei"、Arial、SimSun）根本没打包 wdth 轴或任何宽度变体 —— font-stretch 对它们完全无效
@font-face 声明漏了 format('woff2 supports variations')，浏览器把可变字体当普通字体加载，wdth 轴被静默丢弃
@font-face 没写 font-stretch: 50% 200%，浏览器不认为该字体“支持宽度轴”，所有关键字（如 condensed）都会 fallback 到 normal
你在 table 元素上设 font-stretch，但子元素（如 td）又重设了 font-family 且新字体不支持 stretch —— 继承被切断

怎么验证表格字体是否真支持 `font-stretch`

别靠肉眼猜，三步快速确认：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

打开 DevTools → Elements 面板 → 点击任意 td 或 th → Styles 标签页 → 展开 font-family 声明，看是否有 “font-stretch applied” 提示（Chrome 120+ 支持）
用 fonttools ttfdump yourfont.woff2 | grep -A 5 fvar 查输出里是否含 wdth；或上传字体到 Wakamai Fondue 看轴列表
临时换 Google Fonts 的可变字体测试：@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Inter+Variable&display=swap');，然后 td { font-family: 'Inter Variable'; font-stretch: condensed; }

`font-stretch` 在表格中的正确写法与限制

即使字体支持，也要注意作用域和语法细节：

必须写在具体文本容器上，比如 td、th 或 span，而不是仅写在 table 上——font-stretch 不会穿透到子元素的字体切换中
只接受关键字或百分比：✅ font-stretch: condensed，✅ font-stretch: 75%；❌ font-stretch: 85px，❌ font-stretch: 1.5
wider 和 narrower 是相对值，依赖父级已设非-normal 才生效；单独用 td { font-stretch: narrower; } 等价于 normal
中文表格慎用 condensed 类值：多数中文字体（包括 Inter VF 中文版）的 wdth 轴仅对拉丁字母有效，汉字字形宽度基本不变，可能只压缩标点或西文字母

表格文字“看起来更窄”的替代方案

如果字体不支持 font-stretch，又必须压缩视觉密度，只能退而求其次：

letter-spacing: -0.03em 可收紧字间距，对中文有一定紧凑感，但无法改变单字宽度；值过大会导致字粘连
transform: scaleX(0.95) 强制横向压缩，但会扭曲字形比例、影响可访问性（屏幕阅读器仍读原字符），且 td 内边距需手动调小以避免溢出
用 font-variation-settings: "wdth" 75 替代 font-stretch —— 它能精确驱动 wdth 轴，但同样要求字体文件 + @font-face 声明双满足，且不继承，必须每个 td 单独写

真正可控的宽度调节永远落在字体文件本身和 @font-face 声明上，font-stretch 只是请求接口，不是变形工具；表格里最容易忽略的是：你设在 table 上的样式，往往被 td 的 font-family 重置覆盖，检查时得盯住最终渲染元素的实际 computed styles。