CSS zoom缩放文本后，如何获取其精确像素尺寸？

问题场景 #

设置了如下代码：

<div class="text">This is some text</div>

.text {
  font-size: 17px;
  zoom: 1.1;
}

浏览器「计算样式」面板仍显示字体大小为17px，疑问如下：

• 能否得知浏览器中文本的实际显示大小？
• 是否可通过计算得出？
• 实际大小是否直接为17×1.1=18.7px？

解答 #

• 可以得知实际显示大小：有两种可靠方式，一是通过计算推导，二是直接测量元素的渲染尺寸。
• 可通过计算得出理论值：zoom属性的作用是对元素进行整体缩放（包括字体、尺寸等所有视觉属性），缩放比例是设定的数值，所以理论上文本的实际显示大小就是 17px × 1.1 = 18.7px。部分浏览器可能会因像素对齐做微小调整，但核心计算逻辑成立。
• 为什么计算样式显示17px：因为zoom是浏览器提供的非标准属性（虽被主流浏览器支持，但未纳入W3C标准），它不会修改元素的计算样式值，只是在渲染阶段对元素进行视觉缩放，所以计算面板里只会显示原始的font-size设置。
• 验证实际大小的方法：
  • 使用JavaScript：通过document.querySelector('.text').getBoundingClientRect()获取元素的渲染尺寸，对比未缩放时的尺寸，就能算出实际缩放后的字体大小。
  • 使用浏览器开发者工具：比如Chrome DevTools的「元素测量」功能，直接测量文本的实际渲染高度/宽度，也能得到准确的显示大小。

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