Question

我有CSS的范围：

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

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

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

jsFiddle Link 供参考。

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 here

Answer 2

文字已占据跨度高度的100％（120px），你忘记了其他字符，如“j”或“Á”。

enter image description here

试试这个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" );
    })
});

Answer 4

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

这意味着没有办法自动调整文本大小以消除差距，因为浏览器不会知道关于阈值的任何信息，因此需要手动/视觉试验和错误，并且该技术在不同的浏览器中不会非常成功

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

如果你不想在photoshop中创建图像，那么图像可以在画布的前端创建，也可以在后端通过PHP中的GD创建。通过动态创建图像，您可以循环抛出像素数据，轻松删除文本周围的任何空格。

作为一个侧面点，像cufon或typeface.js这样的字体替换技术可能能够通过一些微调来提供没有差距的文本。

Answer 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;
}

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

计算文本中的空垂直空间

5 个答案: