html - HTML & CSS：操纵字体/文本高度？

Question

我正在为页面中的标题或标题使用自定义字体 (Oswald)。我相信它的高度与本机字体（Arial、san-serif 等）相冲突，并且想知道是否有办法将两种字体均匀设置......？如果稍后放置更多文本，则差距会变得很大。

请看看我在这里有什么：http: //jsfiddle.net/x6v7F/
我有一个临时背景淡入淡出来说明。

谢谢你。

Answer 1

这似乎不是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;    
}

如果你检查那个小提琴，它似乎已经解决了你的问题？

Answer 2

Rob 有 4 个并排的部分（您可能需要增加 jsfiddle 窗口的宽度）。他的问题是他希望他的部分沿着底部排列，但是由于他的正文字体和标题字体之间的不同文本大小而遇到了问题。

许多 css 网格框架试图解决这些类型的问题：规范化文本和标题的高度，以便所有行都落在一个假想的基线网格上。

老实说，我只是给这些部分一个静态高度，并在底部留下一些模糊空间以留出误差。

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

编辑：

如果您正在寻找动态部分高度，则必须利用 javascript 魔术。查询：

  <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>