CSS - 在下降时显示文本而不是基线?

时间:2011-05-30 16:11:00

标签: html css typography

是否有正确的方法在线的下降高度而不是基线显示文字?

请参考以下页面:

http://en.wikipedia.org/wiki/Baseline_(typography

http://jsfiddle.net/YPPnU/

目标是让文本的底部(如小提琴中所示)与H1块的底部齐平,而不使用图像。

我意识到如果我使用降序字符(p,q等)它是齐声但是,我将永远不会将它们用于此项目的范围。我需要没有下行器的字符与h1块的底部齐平。

我尝试过定位和负边距的各种调整,但这会带来两个问题 1)h1的高度搞砸了。 2)负底部的数量可能因使用的字体面而异。 有没有“正确”的方法来做到这一点?

修改 的 请参阅评论以获取更多更新....

最佳工作技术在这里: http://jsfiddle.net/YPPnU/23/

但我不想“猜测”行高

此外,我意识到另一个选择是使用webfont,其中所有字符的底部放置在下降而不是基线,但我似乎无法在谷歌上找到一个。有谁知道这样的事情是否存在?

1 个答案:

答案 0 :(得分:7)

vertical-align: bottomline-height: 65%怎么样?

http://jsfiddle.net/y53uK/