加 Google 字体后表格文字“飘”是因字体加载引发重排、行高与字宽变化，导致 text-align 和 vertical-align 表现异常；需用 table-layout: fixed、固定 line-height、等宽后备字体及显式尺寸控制来稳定对齐。
Media.io Google Veo Video Generator
下载
通过Media.io OpenAPI，使用您的API密钥调用Google Veo 3.1，将文本或图像生成电影级AI视频。
text-align 和 vertical-align 不会因引入 Google 字体而自动失效，但字体加载导致的重排、行高变化、字形宽度差异，确实会让原本“看起来对齐”的表格突然错位——这不是字体的问题，而是你没锁住对齐的上下文。
为什么加了 Google 字体后表格文字“飘”了
Google 字体（如 Roboto、Noto Sans SC）加载前浏览器用默认字体（如 Times New Roman 或 serif）占位渲染，加载后替换为新字体。这个过程可能带来：
- 行高（
line-height）突变：新字体的line-height默认值不同，td高度被撑开或压缩，vertical-align: middle失效 - 字宽不一致：等宽 vs 非等宽字体混用时，
text-align: right对数字列的右对齐效果崩坏（小数点不再竖直对齐） - 字体加载闪动（FOIT/FOUT）：未设置
font-display: swap时，文字先空白再弹出，触发两次 layout，table-layout: fixed可能来不及生效
font-display: swap 必须配 table-layout: fixed
仅加 font-display: swap 不够，它只解决“是否显示”，不解决“怎么对齐”。真正起效的组合是：
- 在
@import或<link>中强制启用交换：<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet"> - CSS 中立即锁定表格结构：
table { table-layout: fixed; width: 100%; } - 给
th和td设固定height或最小min-height，避免字体切换时高度抖动 - 禁用
line-height: normal这类依赖字体度量的值，改用无单位数值（如line-height: 1.4）
中文右对齐数字列要加等宽后备字体
用 Noto Sans SC 或 Source Han Sans 做主字体时，它们本身不是等宽字体，纯靠 text-align: right 无法让 123.45 和 -67.89 的小数点对齐。必须补一层防御：
- 给数字列加类：
<td class="num">123.45</td> - CSS 强制等宽渲染：
.num { font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; } - 确保数据中不含全角空格、Unicode 减号（−），只用 ASCII
-和.
垂直居中失效？检查 line-height 和 padding 是否同步重置
vertical-align: middle 在单元格内生效的前提是：内容高度 + 行高 + 内边距构成可计算的“对齐空间”。Google 字体常带更大默认 line-height，若你只写了 td { vertical-align: middle; } 却没管 line-height，就会发现文字“浮”在上方。应统一写：
td, th { padding: 8px; line-height: 1.3; vertical-align: middle; }- 避免
line-height: normal—— 它会随字体基线动态变化，不可控 - 如果用了
rem或em单位定义padding，确认根字体大小（html { font-size: 16px; }）已显式声明，否则字体加载前后rem值可能漂移
