行间距和混合字体大小

  • 本文关键字:字体 混合 css
  • 更新时间 :
  • 英文 :


谁知道是否有可能保持一个恒定的行间距CSS,即使你使用不同的字体大小的一行?下面是第二段比第一段行距更大的例子。我曾尝试将line-height设置为0,用于CSS中的"huge"span,但这似乎还不够。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Line Spacing Test</title>
<style type="text/css">
body {
    font-size: 14px;
    line-height: 1;
}
.huge {
    font-size: 64px;
    line-height: 0;
}
</style>
</head>
<body>
<p>Here is a line using normal font size.<br />
Here is another line using normal font size.</p>
<p>Here is a line with a span with <span class="huge">huge</span> font
size.<br />
Here is another line with a span with <span class="huge">huge</span>
font size.</p>
</body>
</html>

只有将行间距设置得足够大,以容纳使用的最大字体,才能使行间距恒定。根据规范,在块元素上设置line-height将设置行框的最小高度。对于行内元素,事情要复杂得多,但归根结底是让浏览器最终决定行框的高度和间距。

在某些浏览器上,你可以说服浏览器使用你的高度,例如,通过添加

span { display: inline-block; height: 16px; }

最新更新