CSS - Display text at descent instead of baseline?

问题

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?

回答1:

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

http://jsfiddle.net/y53uK/

来源：https://stackoverflow.com/questions/6178506/css-display-text-at-descent-instead-of-baseline