如何才能获得字体字形的顶部边框?

Dr.*_*ula 9 css typography border

我需要在一个项目中显示几个字体样本的基线,x高度和上限高度的规则.我有基线和x高度照顾,但我很难得到一个通用的CSS规则,将在我应用规则的任何字体的上限高度绘制边框.我已经摆弄了线条高度,但是字体的字形与其布局框顶部之间的空间因字体而异,因此设置一次将不适用于任何字体.

此代码笔示例说明了此问题:http: //codepen.io/DrSpatula/pen/BAgqG

pix*_*tor 0

它很脏,但是您是否尝试过使用单像素 .gif 作为重复背景,然后可以设置它相对于字体的位置?