Question

是否有一种方法可以设置一个CSS基线网格（垂直节奏），如果一个标题最终出现在多行上，该网格不会崩塌？

Answer 1

是的，我有一种方法。它需要一些CSS +标记+实用程序字体。

这是具有多个块，字体大小和字体的有效解决方案的代码笔： https://codepen.io/shalanah/pen/RyEOEO

您可以在上面和下面的示例中添加任意数量的字符，它将起作用。

示例标记

<h1><span>Heading One</span></h1>
<p><span>Paragraph</span></p>

示例CSS

:root {
  --grid: 20; /* Vertical rhythm */
}

/* 1. Include a baselined font - This font is exactly 1em tall with no metrics below the baseline */
@font-face {
  font-family: "Baseline Em";
  src: url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff2") format("woff2"),
  url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff") format("woff"),
  url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* 2. Setting block elements up */
h1, p {
  font-family: "Baseline Em"; /* Baselined font only needed at block level */
  line-height: 1em;
}

/* 3. Ignore inline line-heights */
h1 *, p * {
  line-height: 0;
}

/* 4. Leadings and margins */
h1 {
  font-size: calc(var(--grid) * 4px); /* mult of grid - our leading */
  margin-bottom: calc(var(--grid) * 3px);
  margin-top: calc(var(--grid) * 3px);
}
p {
  font-size: calc(var(--grid) * 2px); /* mult of grid - our leading */
  margin-bottom: calc(var(--grid) * 1px);
}

/* 5. Inline styles, lots of freedom, don't need to be multiples of grid */
h1 > span {
  font-size: 100px;
  font-family: Arial; /* Any font you want */
}
p > span {
  font-size: 22px;
  font-family: Arial; /* Any font you want */
}

大部分时间都不值得花时间去实现。我想出了这个解决方案，因为我绝对需要它。我希望我们在CSS中拥有一个领先的属性，因为line-height是仅用于网络的发明，因此可以代替line-height来使用。

CSS基线-标题进入多行时，垂直节奏不起作用

1 个答案: