如何用CSS精确设置HTML字体高度且不改变宽度？

下面是几种能满足你需求的实现方式，按实用性排序：

1. 可变字体（Font Variations）精确调参 #

如果你的项目可以使用可变字体，这是最原生且精确的方案。很多现代可变字体内置了字高调整轴（通常标识为YTLC或YTRA），能直接修改字体高度而完全不影响宽度。

示例代码：

.text-element {
  font-family: "Your Variable Font", sans-serif;
  /* 先设置基础字号，再通过字高轴调整到目标高度 */
  font-size: 16px;
  /* YTLC轴范围通常为0-1000，根据字体实际参数调整比例，示例将字高放大至20px对应值 */
  font-variation-settings: "YTLC" 1250; 
}

• 优点：原生CSS支持，无布局偏移，性能最优，完全不影响宽度。
• 缺点：依赖支持字高轴的可变字体，需提前确认字体参数。

2. 结合transform: scaleY与精确计算 #

若只能使用普通字体，可通过计算缩放比例实现精确高度控制，同时规避布局问题：

步骤：

1. 设置基础font-size，通过JS获取元素的offsetHeight得到原始字体实际高度。
2. 计算缩放比例：目标高度 / 原始高度。
3. 应用transform: scaleY(比例)，并设置transform-origin: top left避免文本位移。
4. 用height或min-height手动设置目标高度（因为transform不影响文档流）。

示例代码：

<span class="scaled-text">测试文本</span>

<script>
const targetHeight = 20;
const textEl = document.querySelector('.scaled-text');
const originalHeight = textEl.offsetHeight;
const scaleRatio = targetHeight / originalHeight;

textEl.style.transform = `scaleY(${scaleRatio})`;
textEl.style.transformOrigin = 'top left';
textEl.style.height = `${targetHeight}px`;
</script>

<style>
.scaled-text {
  display: inline-block; /* 确保offsetHeight能正确获取高度 */
  font-size: 16px; /* 基础字号 */
}
</style>

• 优点：兼容所有字体，计算后能精确达到目标高度。
• 缺点：需要JS辅助计算，极端缩放比例下文本可能出现轻微模糊。

3. SVG文本精确控制 #

SVG的文本渲染系统支持绝对像素级的缩放和尺寸控制，适合需要高精度的场景：

示例代码（静态）：

<svg width="200" height="20" viewBox="0 0 200 20">
  <!-- 假设原始字号对应高度16px，目标20px，scaleY设为1.25 -->
  <text x="0" y="16" transform="scale(1, 1.25)" font-size="16" font-family="Arial">测试文本</text>
</svg>

动态生成示例：

function createScaledText(text, targetHeight, fontSize = 16) {
  const scaleRatio = targetHeight / fontSize;
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('viewBox', `0 0 200 ${targetHeight}`);
  svg.setAttribute('width', '200');
  svg.setAttribute('height', `${targetHeight}`);
  
  const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  textEl.setAttribute('x', '0');
  textEl.setAttribute('y', fontSize); /* 对齐基线 */
  textEl.setAttribute('transform', `scale(1, ${scaleRatio})`);
  textEl.setAttribute('font-size', fontSize);
  textEl.setAttribute('font-family', 'Arial');
  textEl.textContent = text;
  
  svg.appendChild(textEl);
  return svg;
}

// 使用示例
document.body.appendChild(createScaledText('动态文本', 20));

• 优点：像素级精确，不影响页面布局，适合动态生成文本的场景。
• 缺点：需处理SVG的文本对齐和布局，比CSS方案稍复杂。

内容的提问来源于stack exchange，提问作者joel-rn