javascript - 自动设置 line-height 使顶部和底部没有间距

Question

html 中的文本有一个line-height 属性，它决定了给字符多少垂直间距。默认情况下，字体大小 和垂直间距 不匹配。如果 span 的字体大小为 50px，则 50px 的 line-height 将在底部和顶部产生间距的文本。

http://jsfiddle.net/7vNpJ/773/

您可以通过手动调整 line-height 来解决这个问题，例如在这个例子中:

http://jsfiddle.net/7vNpJ/774/

<span>
    BIG TEXT
</span>

span {
    display: inline-block;
    font-size: 50px;
    background-color: green;
    line-height:0.7;
}

0.7 的行高仅适用于该特定字体。我正在寻找一种自动执行此操作的方法，而不管应用的字体如何。

所以基本上我正在寻找方程式或程序来设置字体大小和行高，以便顶部和底部的间距为零。你建议我做什么？包含许多字体的匹配行高的库也可以解决问题。

Answer 1

你可以这样试试。这段代码可能对您有帮助:

var fontSize = $('.lineHeightCss').css('font-size').split('px')[0];
var t = fontSize/100*1.42857;
$('.lineHeightCss').css('line-height',t>0?.7:t);

span {
    display: inline-block;
    font-size: 100px;
    background-color: green;
    line-height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="lineHeightCss">
    BIG TEXT
</span>

访问此处:https://medium.com/@zkareemz/golden-ratio-62b3b6d4282a