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

本文介绍一种基于 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 引擎处理——这才是真正“让字体尽可能大且适配屏幕”的专业解法。