CSS - 在下降而不是基线显示文本？ [英] CSS - Display text at descent instead of baseline?

问题描述

请参考以下页面：

$ b是否有适当的方式在行的下降高度显示文本而不是其基线？
$ b

http://en.wikipedia.org/wiki/Baseline_（ ）

和$ / b>

http://jsfiddle.net/YPPnU/

目标是让我的文字底部（如我不知道如果我使用降序字符（p，q等），那么它就是同花顺的（flush），而不会使用图像。

然而，我将永远不会使用它们作为这个项目的范围，我需要没有下划线的字符与h1块的底部齐平。

我试过了各种调整与定位和负边缘，但这提出了两个问题
1）h1的高度变得混乱。
2）底部底部的数量可能会因使用的字体而异。
是否有正确的方式来做到这一点？

编辑
请查看额外更新的评论....

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

但我宁愿不要觉得 line-height

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

with line-height：65％？

http://jsfiddle.net/y53uK/

Is there a proper way to display text at the descent height of a line instead of its baseline?

Please reference the following pages:

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

and

http://jsfiddle.net/YPPnU/

The goal is to have the bottom of my text (as pictured in the fiddle) flush with the bottom of the H1 block without using images.

I realize that it is flush if I use descending characters(p, q, etc) however, I will never be using them for the scope of this project. I need characters without descenders to be flush with the bottom of the h1 block.

I've tried various adjustments with positioning and negative margins, but this presents two problems 1) the height of the h1 gets messed up. 2) the amount of the negative bottom could vary depending on the font-face used. Is there a "proper" way to do this?

edit Please see comments for additional updates....

Best working technique is here: http://jsfiddle.net/YPPnU/23/

But I would prefer not to "guestimate" the line-height

Additionally, I realized another option would be to use a webfont where the bottom of all characters was placed at the descent instead of the baseline, but I can't seem to find one on google. Does anyone know if such a thing exists?

解决方案

What about vertical-align: bottom with line-height: 65%?

http://jsfiddle.net/y53uK/

这篇关于CSS - 在下降而不是基线显示文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！