Every browser comes with its own default CSS settings for the size and spacing of web page text, but it is rare that these values are optimal for the presentation of every typeface. I’ve covered sizing text with CSS in a previous article, so that won’t be my concern here: instead, I’ll be concentrating on line-height
and margin
.
每种浏览器都有其自己的默认CSS设置,用于设置网页文本的大小和间距,但是很少有这些值适合表示每种字体。 在上一篇文章中,我已经介绍了使用CSS调整文本大小的方法 ,因此在这里我不必担心:相反,我将专注于line-height
和margin
。
Commonly referred to in the printing industry as leading, line-height
is the vertical distance between lines of text in a content block. Depending on the browser and typeface used, line-height
will commonly be a default value between 1.2 and 1.4, referred to as the “normal” value. In addition to this numerical value and keyword, leading can also be specified using percentages or a length value such as pixels or ems.
line-height
是印刷行业中通常所说的行距 , 是内容块中文本行之间的垂直距离 。 根据所使用的浏览器和字体, line-height
通常是默认值,介于1.2和1.4之间,称为“正常”值。 除了此数值和关键字外,还可以使用百分比或长度值(例如像素或ems)来指定前导。
![Screenshot showing too tight leading on h1 element](https://i-blog.csdnimg.cn/blog_migrate/73fc887fd490f0064d9856462799e454.png)
line-height
with a length measurement
line-height
和长度测量值导致h1元素的紧缩
Low leading values crams text together, reducing legibility. At the other end, “loose” leading adds too much vertical space, forcing the reader to work overtime as they try to scan continuous lines of text. Selecting the right amount of leading to display text is part of the typographer’s art, and depends on many factors, including the stroke weight and style of the text, font-size and measure length.
较低的前导值将文本塞在一起,从而降低了可读性。 在另一端,“松散”引导增加了过多的垂直空间,迫使读者在尝试扫描连续的文本行时需要加班。 选择合适的行距以显示文本是印刷者的工作之一,并且取决于许多因素,包括笔划粗细和文本样式,字体大小和小节长度。
As a general rule, try to set font declarations as early as possible in stylesheets, creating a default for everything that follows. A typical starting point would be something like the following:
通常,请尝试尽早在样式表中设置字体声明,并为随后的所有内容创建默认设置。 典型的起点如下:
body {
font-family: Calluna Sans, Arial, Helvetica, sans-serif;
font-size: 1.6rem;
line-height: 140%;
}
This sets the font size at the root of the element to approximately 22 pixels in height.
这会将元素根部的字体大小设置为大约22像素高。
As a general rule, body text should be set to approximately 20px / 1.42rem for ledgibility.
作为一般规则,主体文本应设置为大约20px / 1.42rem,以实现可辨认性。
The problem is that when set with any length value line-height
does not scale across different text sizes, as you can see above: the paragraph text has the correct leading, but that on the h1
element is too tight.
问题是, 当使用任何长度值设置line-height
它不能跨不同的文本大小缩放 ,如您在上面看到的:段落文本具有正确的开头,但是h1
元素上的开头太紧。
Somewhat unusually in CSS, line-height
can be set as a pure number, without any specified measurement system. When set as a floating-point digit, leading does scale correctly across different font sizes:
在CSS中有些不同寻常, 可以将line-height
设置为纯数字 ,而无需任何指定的度量系统。 当设置为浮点数字时,前导确实可以在不同字体大小之间正确缩放:
body {
font-family: Calluna Sans, Arial, Helvetica, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
}
![Screenshot showing correct leading on elements](https://i-blog.csdnimg.cn/blog_migrate/0a3d9e4d0e153a8a94b27d1960dff8b0.png)
Now you’ve guaranteed that leading won’t be too tight for text of any size on your page. As a general rule, paragraph text should be set to a leading value of at least 1.5 to make it legible and accessible. There’s nothing stopping you from altering leading for other elements: it’s safe to assume that headings will require less leading than paragraph text. You can also shortcut the declaration with the font
property, as shown below.
现在,您已经确保页面上任何大小的文本的行距都不会太紧。 通常,段落文本的前导值应至少设置为1.5,以使其清晰易读 。 没有什么可以阻止您更改其他元素的开头:可以肯定的是,标题所需要的开头要比段落文本少。 您还可以使用font
属性来简化声明,如下所示。
body {
font: 1.6rem/1.5 Calluna Sans, Arial, Helvetica, sans-serif;
}
h1 { line-height: 1; }
By specifying leading as a number, you now have the ability to set line-height
that will scale proportionally across different font sizes.
通过将前导指定为数字,您现在可以设置line-height
,该line-height
将在不同字体大小之间成比例缩放。
行高的其他潜在问题 (Other Potential Issues With line-height)
If you’re using <sub>
or <sup>
to set superscript or subscript text in a web page, the default line-height
on the elements can throw off the leading of paragraphs, as shown in the illustration.
如果您使用<sub>
或<sup>
在网页中设置上标或下标文本,则元素上的默认line-height
可能会导致段落开头,如图所示。
One solution is to set line-height
for <sub>
and <sup>
elements to 0, as I have suggested in my CSS reset and boilerplate: doing so won’t alter the position of subscripted or superscripted text, but will preserve the correct leading between paragraph lines. Alternatively, you can use an OpenType font to typeset superscript text automatically.
一种解决方案是将<sub>
和<sup>
元素的line-height
设置为0,正如我在CSS重置和样板中所建议的那样:这样做不会更改下标或上标文本的位置,但会保留正确的位置。在段落线之间领先。 或者,您可以使用OpenType字体 自动排版上标文本 。
保证金 (margin)
In CSS, margin
is used to separate content blocks. In the case of paragraphs, headings, and other text elements, margin-top
and margin-bottom
is used to provide vertical distance between blocks of text. Setting both to 0 on paragraph text, for example, will provide the impression of continuous paragraphs. If that was the case, you’d typically add text-indent
to distinguish the start of each paragraph:
在CSS中, margin
用于分隔内容块 。 对于段落,标题和其他文本元素,使用margin-top
和margin-bottom
提供文本块之间的垂直距离 。 例如,将段落文本都设置为0,将给人连续的段落印象。 如果是这种情况,通常会添加text-indent
来区分每个段落的开头:
p {
margin-top: 0;
margin-bottom: 0;
text-indent: 2rem;
}
Leaving both margin-top
and margin-bottom
undeclared will provide normal separation between paragraphs, but leaving the defaults on headings can cause layout issues. For example, with the following markup:
离开这两个margin-top
和margin-bottom
未申报将提供段落之间的正常分离,但留在标题中的默认设置可能会导致布局问题。 例如,带有以下标记:
<body>
<section>
<h1>A Princess Of Mars by Edgar Rice Burroughs (published 1917)</h1>
<p>In submitting Captain Carter's strange manuscript to you…
We will add the following CSS:
我们将添加以下CSS:
body {
font: 1.6rem/1.5 Calluna Sans, Arial, Helvetica, sans-serif;
margin: 0;
background: #333;
}
section {
background: #fff;
width: 70%;
margin: 0 auto;
}
h1 { line-height: 1; }
h1, p {
margin-left: 5rem;
margin-right: 5rem;
}
Everything in the CSS would indicate that the h1
should touch the top of the page; instead, we see a result that you can see in the illustration.
CSS中的所有内容都表明h1
应该触摸页面顶部; 相反,我们看到的是您在插图中看到的结果。
![Screenshot showing unexpected space above h1 element](https://thenewcode.com/assets/images/top-gap.gif)
To fix this issue, we must set margin-top
for the <h1>
element to 0
; we can counterbalance this by pushing the heading down with some padding-top
added to the <section>
:
要解决此问题,必须将<h1>
元素的margin-top
设置为0
; 我们可以通过在<section>
padding-top
添加一些padding-top
来向下推动标题来抵消这种情况:
section {
background: #fff;
width: 70%;
margin: 0 auto;
padding-top: 5rem;
}
h1 {
line-height: 1;
margin-top: 0;
}
h1, p {
margin-left: 5rem;
margin-right: 5rem;
}
Thoroughly understanding the contributions of both line-height
and margin
to text layout will help you tremendously in creating effective design for your web pages.
全面了解line-height
和margin
对文本布局的贡献将极大地帮助您为网页创建有效的设计。