如何正确获取含文本的区块高度？非标准字体场景遇异常

你遇到的问题本质是Web字体加载延迟导致高度计算时机错误——你的JS代码在页面加载时就立刻计算了内容高度，但此时Rubik Burned字体还没加载完成，浏览器用系统 fallback 字体渲染文本，这个字体的行高、字符间距和目标字体不一样，计算出的高度比实际渲染后的高度小。等字体加载完成后，文本实际高度变大，但CSS变量里存的还是旧值，所以展开后只能显示3段。

用document.fonts.ready监听字体加载完成事件，在字体完全加载后再计算并设置高度；同时加上窗口resize监听，确保窗口尺寸变化时重新计算高度（避免响应式场景下高度不准）。

修改后的JS代码：

let Uncoverblock = document.querySelector('.uncover-block');
let root = document.querySelector(':root');
let body = document.querySelector('body');

function setBlockHeight() {
    let name = '--height-1';
    // 用scrollHeight确保获取完整内容高度，包括可能的溢出部分
    let value = Uncoverblock.firstElementChild.scrollHeight + 'px';
    root.style.setProperty(name, value);
}

// 等待所有字体加载完成后计算高度
document.fonts.ready.then(() => {
    setBlockHeight();
});

// 窗口resize时重新计算
window.addEventListener('resize', setBlockHeight);

body.addEventListener('click', function () {
    body.classList.add('open');
});

可以给.block加上visibility: hidden直到字体加载完成，避免字体闪烁和高度跳动：

.block {
    max-height: 100px;
    overflow: hidden;
    visibility: hidden;
}

.fonts-loaded .block {
    visibility: visible;
}

然后在document.fonts.ready回调里给body加上fonts-loaded类：

document.fonts.ready.then(() => {
    setBlockHeight();
    body.classList.add('fonts-loaded');
});

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