Question

假设我的CSS字体大小为12像素。测量时产生的文本高度略大于12像素（大约14个像素取决于浏览器）。我的问题是：

额外空间来自哪里？
我猜测额外的几个像素来自领先，这是真的吗？如果是，我将line-height设置为0，因此应删除任何前导。但这并没有改变结果。

text是SVG元素。我正在尝试测量给定字体大小的SVG文本元素的高度，即：参数font_size。在此测量中，变焦为1（无变焦）。

    function measureSize(text, font_size, zoom, style) {
    $('#container').css('transform', 'scale(' + zoom + ')');
    $('#container').css('transform-origin', 'left top 0px');


    $('#text').text(text).attr('style', 'position: absolute;' + (style || "")).css('font-size', font_size + 'px');

    var bbox = $('#text')[0].getBBox();     
    return { width: bbox.width, height: bbox.height };
};

Answer 1

内联元素的高度取决于很多东西，包括字体和浏览器。 CSS 2.1 spec明确地将其留给了浏览器。将line-height设置为1将删除前导（或将前导设置为0，具体取决于您对“前导”的含义 - 术语令人困惑），但浏览器仍可能使行框高于字体大小。

如果您在元素上设置display: block或display: inline-block，则可以设置height: 1em使其高度等于字体大小。这可能意味着角色的某些部分（特别是“Ê”或“Å”中的变音符号）会被切断。

CSS中的12像素字体大小是什么意思？

1 个答案: