为什么某些字体的元素的scrollHeight和clientHeight不一样？

Question

对于某些字体,当line-height元素小于阈值时,scrollHeight大于clientHeight.

因此,字体属性中有一些东西会导致这种情况,但是这是什么以及如何避免使用CSS甚至是自定义字体的字体编辑器？

例如,在这个片段中scrollHeight的Tahoma是超过clientHeight虽然sans-serif时似乎确定line-height为1 时,该页面在浏览器(CTRL +)被缩小这种差异会增加,甚至无衬线发生.当行高低于1或字体大小变大时,差异会增加.

对于其他一些字体,它在行高1处达到5px,并通过将行高增加到2而减小,这导致计算错误.

var a = document.getElementById('a');
console.log('tahoma - a.clientHeight: ' + a.clientHeight);
console.log('tahoma - a.scrollHeight: ' + a.scrollHeight);

var b = document.getElementById('b');
console.log('sans - b.clientHeight: ' + b.clientHeight);
console.log('sans - b.scrollHeight: ' + b.scrollHeight);

var c = document.getElementById('c');
console.log('sans - lineHeight:0.5 - c.clientHeight: ' + c.clientHeight);
console.log('sans - lineHeight:0.5 - c.scrollHeight: ' + c.scrollHeight);

var d = document.getElementById('d');
console.log('sans - font-size:200px - d.clientHeight: ' + d.clientHeight);
console.log('sans - font-size:200px - d.scrollHeight: ' + d.scrollHeight);

div[id] {
 overflow:auto;
 max-width:80%;
}

<div id='a' style='font-family:tahoma; line-height:1;'>Hello</div>
<div id='b' style='font-family:sans-serif; line-height:1;'>Hello</div>
<div id='c' style='font-family:sans-serif; line-height:0.5;'>Hello</div>
<div id='d' style='font-family:sans-serif; line-height: 1; font-size:500px;'>Hello</div>

很明显,这种差异是由于溢出的问题,但这里涉及哪些字体规格,以及我们如何能够识别的区别scrollHeight和clientHeight？

这在Chrome和Firefox中都会发生 ; 我没有测试其他浏览器.

Answer 1

我发现是元素内容高度scrollHeight的测量，包括由于溢出而在屏幕上不可见的内容，而是元素高度的测量。clientHeight

当您减少 line-height 时，div 元素的高度会变小 - 因此 clientHeight 会变小，但内容的高度不会改变，因此滚动高度将保持不变，所以这就是您的 2 个测量值不同的原因。

如果您希望 2 个不同的测量得到相同的结果，则必须修改容器元素的高度。例如添加到divmin-height: 1.2em

var a = document.getElementById('a');
console.log('tahoma - a.clientHeight: ' + a.clientHeight);
console.log('tahoma - a.scrollHeight: ' + a.scrollHeight);

var c = document.getElementById('c');
console.log('sans - lineHeight:0.5 - c.clientHeight: ' + c.clientHeight);
console.log('sans - lineHeight:0.5 - c.scrollHeight: ' + c.scrollHeight);

.div {
  font-size: 40px;
  margin: 10px;
  border: 1px solid black;
  min-height: 1.2em;
}

<div class='div' id='a' style='font-family:tahoma; line-height:1;'>Hello</div>
<div class='div' id='c' style='font-family:sans-serif; line-height:0.5;'>Hello</div>

显然，这改变了布局。如果不更改布局，您将无法测量 2 个不同的物体并期望获得相同的结果。

如果你想计算真实的字符大小 - 你可以使用这个解决方案

console.log("tahoma size: " + measureTextHeight("40px tahoma"));
console.log("sans-serif size: " + measureTextHeight("40px sans-serif"));
console.log("Bookman Old Style size: " + measureTextHeight("40px Bookman Old Style"));
console.log("Palatino Linotype size: " + measureTextHeight("40px Palatino Linotype"));


function measureTextHeight(fontSizeFace) {

    // create a temp canvas
    var width=1000;
    var height=60;
    var canvas=document.createElement("canvas");
    canvas.width=width;
    canvas.height=height;
    var ctx=canvas.getContext("2d");

    // Draw the entire a-z/A-Z alphabet in the canvas
    var text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    ctx.save();
    ctx.font=fontSizeFace;
    ctx.clearRect(0,0,width,height);
    ctx.fillText(text, 0, 40);
    ctx.restore();

    // Get the pixel data from the canvas
    var data = ctx.getImageData(0,0,width,height).data,
        first = false, 
        last = false,
        r = height,
        c = 0;

    // Find the last line with a non-transparent pixel
    while(!last && r) {
        r--;
        for(c = 0; c < width; c++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                last = r;
                break;
            }
        }
    }

    // Find the first line with a non-transparent pixel
    while(r) {
        r--;
        for(c = 0; c < width; c++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                first = r;
                break;
            }
        }

        // If we've got it then return the height
        if(first != r) return last - first;
    }

    // error condition if we get here
    return 0;
}

div{
  font-size: 40px;
}

<div style="font-family:tahoma;">Hello</div>
<div style="font-family:sans-serif;">Hello</div>
<div style="font-family:Bookman Old Style;">Hello</div>
<div style="font-family:Palatino Linotype;">Hello</div>