如何让字体大小自适应屏幕并保持宽高比

本文介绍一种基于 svg 的终端式文本渲染方案，通过 viewbox 和 preserveaspectratio 实现字符网格的全屏自适应缩放，确保字体在任意屏幕尺寸下自动最大化且不拉伸变形。

在构建类终端应用（如 ASCII 渲染器、TUI 模拟器或代码沙盒）时，常见的痛点是：用大量 元素逐字符渲染虽灵活（便于独立着色），但难以实现响应式等比缩放——CSS 的 font-size 或容器 transform: scale() 往往破坏布局精度、触发重排开销大，或无法兼顾宽高约束。

更稳健的解法是转向 SVG 文本渲染：SVG 原生支持矢量缩放、精确坐标定位与 viewBox 驱动的响应式适配，完美契合“字符即像素”的终端网格需求。

✅ 核心原理

• 定义逻辑坐标系：设每个字符宽 tw、高 th（单位：px），总列数 numCols、行数 numRows → viewBox=

  

  "0 0 (tw×numCols) (th×numRows)"
• SVG 容器设为 width: 100%; height: 100%，浏览器自动按 viewBox 比例缩放内容
• 关键属性 preserveAspectRatio="xMidYMid meet"（默认值）确保等比缩放并居中；设为 "none" 则强制拉伸（可点击切换演示）

? 示例代码（精简可运行版）

* { margin: 0; padding: 0; }
html, body { height: 100%; }
#game { height: 100%; }
.cell {
  font-family: 'Cascadia Code', monospace;
  font-size: 12px; /* 基准字号，实际由 viewBox 缩放决定 */
}
svg {
  display: block;
  width: 100%;
  height: 100%;
}

const tw = 10;   // 字符宽度（逻辑单位）
const th = 12;   // 字符高度（逻辑单位）
const numCols = 100;
const numRows = 25;

function getNode(name, attrs) {
  const el = document.createElementNS("http://www.w3.org/2000/svg", name);
  Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
  return el;
}

function draw() {
  const svg = getNode('svg', {
    viewBox: `0 0 ${tw * numCols} ${th * numRows}`,
    preserveAspectRatio: "xMidYMid meet"
  });

  for (let y = 0; y < numRows; y++) {
    for (let x = 0; x < numCols; x++) {
      const text = getNode('text', {
        x: x * tw,
        y: y * th,
        'alignment-baseline': 'hanging',
        'dominant-baseline': 'hanging',
        class: 'cell'
      });
      text.textContent = String.fromCharCode(65 + (x + y) % 26); // 示例字符
      svg.appendChild(text);
    }
  }

  document.getElementById('game').appendChild(svg);

  // 点击切换缩放模式（仅用于演示）
  svg.addEventListener('click', () => {
    const curr = svg.getAttribute('preserveAspectRatio');
    svg.setAttribute('preserveAspectRatio', 
      curr === 'none' ? 'xMidYMid meet' : 'none');
  });
}

document.addEventListener('DOMContentLoaded', draw);

⚠️ 注意事项

• 字体选择：务必使用等宽字体（如 'Cascadia Code', 'Fira Code', 'monospace'），否则字符错位
• 坐标对齐：alignment-baseline: hanging + dominant-baseline: hanging 确保文本顶部对齐逻辑 Y 坐标（避免 baseline 偏移）
• 性能优化：SVG 渲染 100×25=2500 字符仍非常高效；若需更高帧率（如动画），可批量创建 后一次性 appendChild
• 颜色控制：每个 元素可独立设置 fill 属性，完美替代 的着色需求

✅ 总结

相比 DOM span 方案，SVG 方案以声明式 viewBox 替代手动计算 font-size，天然支持：

• 100% 屏幕填充（无滚动条/留白）
• 严格等比缩放（宽高比恒定，字符不变形）
• 零重排开销（缩放由 GPU 加速）
• 精确像素级定位（适合终端、地图、棋盘等网格场景）

只需定义好逻辑网格尺寸，剩余全部交由浏览器 SVG 引擎处理——这才是真正“让字体尽可能大且适配屏幕”的专业解法。