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

如果您看到this小提琴，您可以看到我已将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;    
}

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

HTML＆amp; CSS：操纵字体/文字高度？

2 个答案: