计算文本中的空垂直空间

Question

我有一个CSS的跨度:

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

其中的文本不占据跨度的完整高度(120px).有没有办法计算跨越上下边界的文本偏移量？

或者这是一种使文本触及封闭范围标记的上下边界的方法吗？

jsFiddle链接 供参考.

Answer 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在这里

Answer 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/

Answer 3

更新

我写了一个小脚本来自动重新调整字体大小，您所需要做的就是手动调整 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" );
    })
});