Question

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

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

以下是代码：

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

Answer 1

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

对于标题，假设您使用基于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几乎不可能进行这种调整，因为字体底部和字体基线之间的距离是未知的。如果您只使用一种字体或几种字体，期望它们可用，您可以对事物进行微调（例如，使用相对定位）以使基线匹配。但重点是普通文本基线匹配，这可以通过设置上述元素的高度来实现。

Answer 2

喜欢这个

<强> demo

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

<强> demo1

<强> demo2

<强> demo3

<强> CSS

h1{
font-size:30px;
}

设置基线网格

2 个答案: