时间戳

首页 > 解决方案 > 标题进入多行时垂直节奏不起作用

css - 标题进入多行时垂直节奏不起作用

问题描述

有没有办法设置一个 CSS 基线网格（垂直节奏），如果标题最终出现在多行上，它不会分崩离析？

标签： cssvertical-rhythm

解决方案

是的，我有一个方法。它需要一些 CSS + Markup + Utility 字体。

这是具有多个块、字体大小和字体的工作解决方案的代码笔： 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 是一个仅限 Web 的发明。

推荐阅读