9

プロジェクトで、いくつかのフォント サンプルのベースライン、X ハイト、およびキャップ ハイトでルールを表示する必要があります。ベースラインと x-height を処理しましたが、ルールを適用するフォントのキャップの高さで境界線を描画する一般的な CSS ルールを取得するのに問題があります。行の高さをいじりましたが、フォントのグリフとレイアウト ボックスの上部の間のスペースはフォントによって異なるため、一度設定するとどのフォントでも機能しません。

このコード ペンの例は、問題を示しています: http://codepen.io/DrSpatula/pen/BAgqG

4

3 に答える 3

1

これで、行の高さを 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

非常に汚れていますが、1ピクセルの.gifを繰り返し背景として試したことがありますか？フォントに対する相対的な位置を設定できますか？

于 2013-03-19T12:09:04.457 に答える
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 に答える