15

我有一个 CSS 跨度：

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

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

或者这是一种使文本接触封闭跨度标记的上下边界的方法？

jsFiddle 链接 供参考。

4

5 回答 5

6

这在没有 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在这里

于 2013-01-28T18:05:06.857 回答
6

文本已经占据了跨度高度的 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/

于 2013-02-01T00:21:37.243 回答
4

更新

我写了一个小脚本来自动重新调整 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" );
    })
});
于 2013-02-02T00:25:22.170 回答
3

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

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

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

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

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

于 2013-02-01T00:57:37.313 回答
3

这样做的方法是将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;
}

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

于 2013-02-02T01:10:12.313 回答