1

今天我读了一篇关于 CSS Typography 以及如何设置简单基线网格的文章。我认为尝试会很有趣，所以我设置了所有内容，但显然它看起来不像预期的那样。

这是全屏小提琴： 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 时，基线完全关闭。为什么？我计算错了吗？

4

3 回答 3

3

看看这篇文章的“丑陋”部分：

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

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

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

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

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

您要确保顶部和底部填充加起来等于您的行高值；例如，如果您必须在 h1 元素的顶部填充中添加 5 个像素，使其与所需的 10 像素基线网格对齐，那么您必须在底部填充中添加 5 个像素才能获得 h1 的总高度元素（包括填充）等于 10 像素的倍数（假设它的行高已设置为 10 像素的倍数，例如 10 像素、20 像素等）。您也可以为此目的使用边距，但这可能会由于边距折叠而变得混乱。此外，您希望避免 line-height 小于 font-size，并且您希望避免在一个元素中组合两种不同的字体大小，因为这也可能会偏离基线网格。正如引用的文章指出的那样，

于 2013-07-15T22:22:49.230 回答
1

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

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

于 2013-07-16T10:41:02.910 回答
0

我认为大多数基线/垂直节奏方法很难使用，因为您需要了解字体的指标。我想出了一个更容易使用的方法。它使用 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>

于 2019-04-23T00:49:31.010 回答