计算文本中的空白垂直空间答案

【问题标题】：Calculate empty vertical space in text计算文本中的空白垂直空间
【发布时间】：2013-01-23 02:47:38
【问题描述】：

我有一个 CSS 跨度：

font-height = 120px; 
height = 120px;
line-height = 120px;

其中的文字没有占据整个跨度的高度（120px）。有什么方法可以计算跨度范围内的文本与上下边界的偏移量吗？

或者这是一种让文本接触封闭span标签的上下边界的方法？

jsFiddle Link 供参考。

【问题讨论】：

我认为这是特定于字体的； font-size:120px 并不一定意味着一个字母将占据整个 120 像素的高度/宽度。 jsfiddle.net/jTpfT/2
对。但是有什么方法可以计算这个偏移量吗？
我不这么认为，除非你的目标是准确的字体。
这可能通过 WebGL 或 Canvas 标签通过渲染画布然后循环检查像素颜色来实现；检查 row1 是否包含非白色像素，然后移动到 row2 等。请参阅 stackoverflow.com/a/1936084/694325 。我不想添加作为答案，因为这太模糊了，可能对你不起作用。

标签： javascript jquery css

【解决方案1】：

这在视觉上不需要 javascript：

#abc {
    margin: none;
    border: dotted 1px red;
    padding: 0;
    height: 120px;
    font-size:180px;
    line-height:120px;
    display:inline-block;
}

我认为你需要使用display:inline-block;，并根据你实际使用的字体调整字体大小。

JsFiddle here

【讨论】：

这就是答案。此外，网页排版也远非完美。甚至桌面排版也有类似的怪癖。所以这是一个很好的解决方案，但不要认为这意味着每个浏览器上的每种字体都会按预期运行。
@JakeGould：是的，我认为如果重要的是实际渲染，那么另一种我认为不太理想的方法是使用图像并在 Photoshop 中处理问题.但我更喜欢用 HTML/CSS 来做！
你认为这个偏移量是如何计算的？即：180px 为 120px？
我不认为它可以；我不认为这是这样做的方法。除非您的用户可以更改字体，否则您不需要这样做。把事情简单化。如果确实由于您必须处理多个设备而导致字体发生变化，那么确定每个场景的值是什么，并使用一些 jQuery 来设置字体大小。例如，设置高度：120px；字体大小：180px；行高：120px；用于桌面并设置高度：XYZpx；字体大小：XYZpx； line-height:XYZpx 移动设备。在任何情况下，您都不应该在运行时计算这些值，因为排版在实际尺寸方面并不可靠。
你说得对，网页排版不可靠。每种字体为不同的字体留下不同的偏移量。您的解决方案无法达到我的目的。

【解决方案2】：

文本已经占用了跨度高度的 100% (120px)，您忘记了其他字符，例如“j”或“Á”。

试试这个 html：

<span id="abc">jÁ / ABC</span>

还有这个css

#abc {
    margin: none;
    border: dotted 1px red;
    padding: 0;
    display:inline-block;
    /*****120px*****/
    height: 120px;
    font-size:120px;
    line-height:120px;
}

测试：http://jsfiddle.net/jTpfT/17/

【讨论】：

我同意 FONT 占据了完整的高度。但是对于常规字符，例如：A，不同浏览器的顶部和底部的偏移量是不同的。所以要么我需要一种方法让它们相等，要么找到一种方法来计算不同浏览器的偏移量。
我为此编写了一个小脚本，请参阅另一个答案。

【解决方案3】：

更新

我写了一个小脚本来自动重新调整font-size，你需要做的就是手动调整font-family总大小的总高度和font-family大写大小的比例。

检查脚本：http://jsfiddle.net/jTpfT/32/

JS：

/**
 * Calculate the ratios by hand and store in this variable form:
 * myfontlowercase + _upper_case_ratio
 */
 var georgia_upper_case_ratio           = 1.44
 var arial_upper_case_ratio             = 1.32
 var times_upper_case_ratio             = 1.48

 /********************************************/

 $(document).ready(function() {
    $(".fitTextHeight").each(function(){
        //Get font family
        var ff = $(this).css('font-family').toLowerCase().split('\'').join('').split(' ').join('');

        //get ratio
        var miRatio = 1;
        try {miRatio = eval(ff+ "_upper_case_ratio"); } catch (e) { }

        //Get boxSize
        var boxSize = Number ($(this).css('height').split('px')[0]);

        //Calculate newSize & apply
        var newCssFontSize =  boxSize  * miRatio
        $(this).css('font-size', newCssFontSize );
        $(this).css('line-height', boxSize + "px" );
    })
});

【讨论】：

可以进行更正。实际上，对于一些字体浏览器组合，Arial 的比例并不是恒定的。 120px 不同，其余的也不同。
有线，我检查，我看到总是相同的比率，在 ie8/ff/chrome 中检查

【解决方案4】：

就浏览器而言，您在 jsFiddle 链接中看到的差距并不存在。间隙是字体的一部分。例如，如果您将小写 g 放入示例中，则底部间隙消失并且跨度与文本完美匹配。

这意味着无法自动调整文本大小以消除间隙，因为浏览器将不知道阈值，因此需要手动/视觉试验和错误，并且该技术在不同浏览器中不会非常成功.

假设问题正在消除这个差距，我只能看到 1 个真正解决这个问题的方法。解决方案是使用图像。

如果您不想在 Photoshop 中创建图像，则可以在画布上的前端创建图像，或者通过 PHP 中的 GD 等库在后端创建图像。通过动态创建图像，您可以循环抛出像素数据以轻松删除文本周围的任何空白。

顺便说一句，像cufon 或typeface.js 这样的字体替换技术可能能够通过一些微调提供没有间隙的文本。

【讨论】：

【解决方案5】：

方法是设置line-height 相对于font-size。之后，您需要使用display:inline-block。这并不完美，您必须考虑您正在使用的各个字体。控制变化的一种方法是使用text-transform:uppercase。

代码如下：

#abc {
  font-size: 100px;
  line-height: 68.5%;
  border: dotted 1px red;
  text-transform:uppercase;
  display:inline-block;
}

您可以将字体大小更改为您喜欢的任何大小——它仍然可以使用。如果您使用不同的字体，只需更改行高的相对百分比即可。

【讨论】：