今天我读了一篇关于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时，基线完全关闭。为什么？我算错了吗？
看一下本文的“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基线网格是相当混乱的，至少如果你手动完成它。
手动设置垂直节奏是一种痛苦。
你用scss标记了你的问题，为什么不使用它的超棒？看看指南针的垂直节奏！
我认为大多数基线/垂直节奏方法很难使用，因为你需要知道你的字体的指标。我想出了一种稍微简单易用的方法。它使用HTML + CSS + Utility字体。您不需要知道您的字体指标，甚至可以混合+匹配字体。
这是您的init设置示例
/* 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>