1

我正在尝试为我的页面设置基线网格，但是当我设置字体比例时，文本不适合基线网格。

我做错了什么？问题与字体比例有关吗？

这是小提琴：http: //jsfiddle.net/3stut/

这是代码：

HTML

<body>

  <h1>Your Name</h1>
  <h2>Your Name</h2>
  <h3>Your Name</h3>
  <h4>Your Name</h4>
  <h5>Your Name</h5>
  <h6>Your Name</h6>
  <p>Paragraph</p>

</body>

CSS

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { 
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset, img {
  border: 0;
}
address, caption, cite, dfn, th, var {
   font-style: normal;
   font-weight: normal;
}
caption, th {
  text-align: left;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before, q:after {
  content: '';
}
abbr, acronym {
  border: 0;
}

h1,h2,h3,h4,h5,h6,hgroup,ul,ol,dd,p,figure,pre,table,fieldset,hr,.header,.media,.island{
margin-bottom:1.5rem;
}


html {
  font:1em/1.5 Cambria, Georgia, "Times New Roman", Times, serif;
  background: url(http://media.smashingmagazine.com/wp-content/uploads/technical-type/img/css/grid.png) center -6px repeat-y #fff;
  color: #333;
  width: 940px;
  padding: 0 10px;
  margin: 0 auto;
 }

body {
  width: 460px;
  margin: 0 auto;
  padding-top: 72px;
 }

h1 {font-size:48px;}
h2 {font-size:30px;}
h3 {font-size:24px;}
h4 {font-size:21px;}
h5 {font-size:18px;}
h6 {font-size:16px;}
4

2 回答 2

2

如果“基线网格”意味着它在排版中的传统含义，那么代码实际上并没有尝试在基线网格中设置东西。对于这样的网格，您需要确保元素的总高度（包括边距）是网格线高度的倍数。如果没有样式，例如标题和图像不会位于基线网格上。

对于标题，假设您的基于 px 的大小调整方法和将边距设置为零的 CSS 重置，以下将使标题满足基本要求：

* { font-size:16px; line-height: 18px; }
h1 {font-size:48px; line-height: 54px;}
h2 {font-size:30px; line-height: 36px; }
h3 {font-size:24px; line-height: 36px; }
h4 {font-size:21px; line-height: 36px; }
h5 {font-size:18px; }
h6 {font-size:16px; }

这里，所有的行高都是 18px 的整数倍。您可以通过使行高部分变小（甚至降低到每个元素的字体大小或稍低一些）并相应地添加例如上边距来修改该方法。

这不会使标题文本基线与另一列中的正常文本基线对齐。使用 CSS 几乎不可能进行这种调整，因为字体底部和字体基线之间的距离是未知的。如果您只使用一种字体或几种字体，并期望它们可用，您可以微调一些东西（例如，使用相对定位）以使基线匹配。但重点是正常文本基线匹配，这可以通过设置元素的高度来实现，如上所述。

于 2013-10-08T10:49:38.707 回答
1

像这样

演示

css

h1 {font-size:48px; margin:0; padding:0;}
h2 {font-size:30px;  margin:0; padding:0;}
h3 {font-size:24px;  margin:0; padding:0;}
h4 {font-size:21px;  margin:0; padding:0;}
h5 {font-size:18px;  margin:0; padding:0;}
h6 {font-size:16px;  margin:0; padding:0;}

--

喜欢this?

演示1

演示2

演示3

css

h1{
font-size:30px;
}
于 2013-10-08T10:10:28.957 回答