桌面Safari中zoom缩放字体无法缩小，如何绕过最小字体限制？

问题复现 #

以下代码中，第二个div通过zoom: .2设置缩放，理论上文本应缩小至4px，但在Safari中实际显示的文字比Chrome更大，且继续缩小缩放比例时，文本无法再变小——即使未开启Safari偏好设置里的「从不渲染小于X号的字体」选项。

HTML代码 #

<div>This is 20px text</div>
<div class="shrunk">This should appear as 4px size text (20px * .2)</div> 

CSS代码 #

div {
  font-size: 20px;
  margin: 20px;
}

div.shrunk {
  zoom: .2;
}

原因分析 #

这是Safari桌面端的固有字体渲染特性：其WebKit排版引擎内置了文本缩放的最小尺寸限制，该限制不受偏好设置里的「最小字体」开关控制。设计初衷是保证文本可读性，但会破坏自助终端这类需要精确缩放场景的适配效果。

另外，-webkit-text-size-adjust: 100%仅对移动端Safari有效，桌面端WebKit引擎不支持用该属性绕过限制。

可行解决方案 #

针对自助终端这类需要精确缩放的场景，可尝试以下替代方案：

1. 用transform: scale()替代zoom
zoom是非标准属性，浏览器实现差异大；transform: scale()是标准属性，Safari对其文本缩放处理更一致，不会触发内置最小字体限制：

div.shrunk {
  transform: scale(0.2);
  transform-origin: top left; /* 匹配zoom默认缩放原点，避免布局偏移 */
}

2. 直接按比例设置font-size
   放弃整体缩放，通过JS计算目标字体大小后直接设置属性，从根源避免缩放限制：

const scaleRatio = 0.2; // 目标缩放比例
document.querySelector('.shrunk').style.fontSize = `${20 * scaleRatio}px`;

3. 用SVG承载文本
   SVG的缩放是矢量级别的，完全不受浏览器字体渲染限制影响，适合需要极致精确缩放的场景：

<svg width="200" height="50">
  <text x="0" y="20" font-size="20px">This is 20px text</text>
</svg>
<svg width="200" height="50">
  <text x="0" y="20" font-size="4px">This should appear as 4px size text</text>
</svg>

场景适配建议 #

自助终端全屏适配场景优先推荐transform: scale()方案，既能保证整体布局缩放一致性，又能避开Safari的文本限制；若需更精细控制，直接设置元素尺寸和字体大小会更可靠。

内容的提问来源于stack exchange，提问作者DA2.