html - HTMLとCSS：フォント/テキストの高さを操作しますか？

Question

ページ内の見出しまたはタイトルにカスタムフォント（Oswald）を使用しています。その高さはネイティブフォント（Arial、san-serifなど）と競合していると思います。両方のフォントを均等に設定する方法があるかどうかを知りたいです...？後でさらにテキストを配置すると、ギャップの差が大きくなります。

私がここに持っているものを見てください：http：//jsfiddle.net/x6v7F/
説明のために一時的な背景のフェードインとフェードアウトがあります。

ありがとうございました。

Answer 1

Robには4つのセクションが並んでいます（jsfiddleウィンドウの幅を大きくする必要がある場合があります）。彼の問題は、セクションを下部に並べたいということですが、本文フォントとヘッダーフォントの間でテキストサイズが異なるため、問題が発生しています。

cssグリッドフレームワークの多くは、これらのタイプの問題に対処しようとします。つまり、すべての行がベースラインの架空のグリッド上にくるように、テキストとヘッダーの高さを正規化します。

正直なところ、セクションに静的な高さを与え、エラーのマージンのために下部にあいまいなスペースを残します。

section { height: 370px; position:relative; }
section .button { position:absolute; bottom:0; right:0; }

編集：

動的なセクションの高さを探している場合は、JavaScriptの魔法を活用する必要があります。JQuery：

  <style>
    section { position:relative; padding-bottom:50px; }
    section .button { position:absolute; bottom:0; right:0; }
  <style>

  <script>
    var max_height = 0;
    $('section').each(function() {
      max_height = Math.max(max_height, $(this).height());
    }).height(max_height);
  </script>

Answer 2

それは問題ではないようですfont-size、問題はあなたが指定することにあるようですline-height

このフィドルを見ると、私が変わっh1て、h2これらを持っていることがわかりますline-heights

h1 {
    font: 16px 'Oswald', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color:#000000;
    margin:14px 0;
    line-height: 100%; <----
}

h2 {
    font: 12px 'Oswald', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color:#BBBBBB;
    margin-bottom: 14px;
    line-height: 100%; <----
    letter-spacing: .2px;    
}

そのフィドルをチェックすると、問題は解決したようですか？