9

我需要在一个项目中显示几个字体样本的基线、x 高度和大写高度的规则。我已经处理了基线和 x-height，但是无法获得一个通用的 CSS 规则，该规则将在我应用该规则的任何字体的大写高度处绘制边框。我已经调整了行高，但是字体的字形与其布局框顶部之间的空间因字体而异，因此设置一次对任何字体都不起作用。

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

4

3 回答 3

1

您现在将 line-height 应用于 p。如果您在此处删除它，并将 line-height 应用于 span.text，并将其设置为 1.55ex 的值，它会正确显示。

所以你的 CSS 将是：

    p {
      font-size: 72px;
      position: relative;
      margin: 0;
      padding: 0;
    }

    p span {
      margin: 0;
      padding: 0;
      display: inline-block;
    }

    .sans {
      font-family: sans-serif;
    }

    .text { 
      border-top: 1px solid blue;
      line-height: 1.55ex;
    }

    .rule {
      height: 1ex;
      border-top: 1px dotted red;
      border-bottom: 1px solid blue;
      position: relative;
      left: -7.25em;
      width: 7.75em;
      top: 1px;
    }
于 2013-05-22T09:29:06.420 回答
0

也许我可以帮忙。我做了一个小小提琴给你看。( http://jsfiddle.net/dgxJh/1/ )

但是，我担心使用此解决方案，您将不得不为每种字体大小和每种字体重新定位粉红色线的跨度。但本质上，您将使用以下代码在文本上放置一个跨度：

span{
    height: 1px;
    width: 100%;
    background: pink;    
    display: block;
    position: absolute;
    top: 0.6em;
}

不要忘记将容器相对定位

于 2013-04-10T19:32:10.060 回答
0

它很脏，但是您是否尝试过将一个像素的 .gif 作为重复背景，然后您可以设置它相对于字体的位置？

于 2013-03-19T12:09:04.457 回答