Question

今天我读了一篇关于CSS排版的文章以及如何设置一个简单的基线网格。我认为这样做可能很有趣，所以我把所有东西都设置好了，但显然它并没有像预期的那样。

以下是全屏小提琴：http://jsfiddle.net/j5Tav/embedded/result/
并使用代码：http://jsfiddle.net/j5Tav/

为了可视化基线，我使用Baseliner作为书签。它使用JavaScript显示基线。

从我的SCSS代码中可以看出，我将基线设置为21px，字体大小为14px：

/* Reset */
* { margin: 0; padding: 0; }

/* Variables */
$bodyFontSize: 14px;
$baseline: 21px; /* 1.5 for 14px */

body {
    font-size: $bodyFontSize;
    line-height: $baseline;
}

article {
    margin: 0 auto;
    width: 65%;
}

h1,
h2,
p {
     margin-bottom: $baseline;
}

h1 {
    font-size: $bodyFontSize * 2;
    line-height: $baseline * 2;
}

h2 {
    font-size: $bodyFontSize * 1.8;
     line-height: $baseline * 1.8;
}

但是，当您在全屏小提琴上使用Baseliner并在书签中输入21时，基线完全关闭。为什么？我计算错了吗？

Answer 1

看一下本文的“The Ugly”部分：

http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

简而言之，对所有元素应用相同的行高不会确保这些元素中的文本与您想到的基线网格对齐。这是因为，在CSS中，文本被设置为行高值的垂直中心。

例如，如果您有一个带有6像素文本的段落和另一个带有24像素文本的段落，并且它们都具有相同的行高值（例如，30个像素），那么这些段落的文本将不会是与同一基线对齐。

要在CSS中实现统一的基线网格，您必须垂直偏移具有不同字体大小的每个文本元素。您可以通过在每个元素的底部和顶部添加填充来实现此目的，其中文本不会与您选择的行高对齐。像John Keyes这样的Baseliner工具可以帮助您了解“真实”基线的位置：

http://keyes.ie/things/baseliner/

您需要确保顶部和底部填充符合您的行高值;例如，如果你必须添加5个像素的顶部填充h1元素，使其与你想要的10像素的基线网格对齐，那么你必须在底部填充添加5个像素，以便h1的总高度元素（包括填充）等于10个像素的倍数（假设它的行高已被设置为多个10个像素，例如10个像素，20个像素等）。您也可以使用边距来实现此目的，但由于边距会崩溃，这可能会变得混乱。此外，您希望避免行高小于字体大小，并且您希望避免在一个元素中组合两种不同的字体大小，因为这也可能会抛弃基线网格。正如引用的文章指出的那样，创建一个真正的CSS基线网格是相当混乱的，至少如果你手动完成它。

Answer 2

手动设置垂直节奏很痛苦。

您已使用scss标记了您的问题，那么为什么不使用它的超棒？看看指南针的垂直节奏！

Answer 3

我认为大多数基线/垂直节奏方法很难使用，因为您需要了解字体的度量。我想出了一种更简单的使用方法。它使用HTML + CSS + Utility字体。您无需了解字体指标，甚至可以混合使用+匹配字体。

这是您的初始化设置的示例

/* Reset */

* {
  margin: 0;
  padding: 0;
}

:root {
  --baseline: 21px;
}


/* 1. Include a baselined font */

@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;
}

/* Show grid lines */

body {
  padding: calc(var(--baseline) * 2px) 100px 100px;
  /* mult of grid */
  background-repeat: repeat-y;
  background-size: 100% var(--baseline);
  background-image: linear-gradient( to bottom, #0ff 0, rgba(255, 255, 255, 0)1px);
}

article {
  margin: 0 auto;
  width: 65%;
  margin-bottom: var(--baseline);
}

/* 2. Setting block elements up */
h1,
h2,
p {
  font-family: "Baseline Em"; /* Baselined font only needed at block level */
  line-height: 1em;
}

/* 3. Making sure only block leading is considered */
span {
  line-height: 0;
}

/* 4. Set leadings + margins */
h1 {
  font-size: calc(var(--baseline) * 2); /* Your leading: Mult of baseline */
  margin-bottom: var(--baseline); /* Mult of baseline */
}
h2 {
  font-size: calc(var(--baseline) * 2);
  margin-bottom: var(--baseline);
}
p {
  font-size: calc(var(--baseline) * 1);
  margin-bottom: var(--baseline);
}

/* 5. Set fonts + font-size */
h1 span {
  font-family: Arial; /* Whatever you want */
  font-size: calc(var(--baseline) * 2); /* Your font-size: Whatever you want */
}
h2 span {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: calc(var(--baseline) * 1.8);
}
p span {
  font-family: Verdana;
  font-size: 14px;
}

<article>
  <h1><span>Heading 1</span></h1>
  <h2><span>Heading 2</span></h2>
  <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar eleifend nisi. Aliquam ultrices laoreet ligula vel elementum. Etiam eu faucibus nisi, vel suscipit nisl.</span></p>
</article>
<article>
  <h1><span>Heading 1</span></h1>
  <h2><span>Heading 2</span></h2>
  <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar eleifend nisi. Aliquam ultrices laoreet ligula vel elementum. Etiam eu faucibus nisi, vel suscipit nisl.</span></p>
</article>

CSS排版 - 为什么基线网格完全关闭？

3 个答案: