作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。
介绍
文本在网页上呈现的方式决定了内容的可读性以及读者的阅读意愿。Web typesetting,文本布局的艺术,是关于控制内容,为读者提供愉快和高效的阅读体验。
本教程将教你如何使用最有效的文本内容布局的 CSS 属性. 您将使用行高度、字母间隔和文本转换等属性与演示内容,以优化阅读和定义内容等级,通过赋予标题突出。
前提条件
您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 了解 CSS 的类型选择器、组合器选择器和特定特性,您可以在 How To Select HTML Elements to Style with CSS 阅读。
一个空的 HTML 文件,存储在您的本地机器上作为 index.html,您可以从您所选择的文本编辑器和 Web 浏览器访问。 要开始,请参阅我们的 How To Set Up Your HTML Project 教程,并遵循 How To Use and Understand HTML Elements 有关如何在您的浏览器中查看 HTML 的说明。 如果您是新的 HTML,请尝试整个 [How To Bu
设置 HTML 和 CSS 文件
在本节中,您将设置您将在整个教程中设计的HTML内容。本教程中的HTML的目的是提供各种元素和情况来设计。
首先,在文本编辑器中打开index.html,并将以下HTML添加到文件中:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 </head>
6 <body>
7 </body>
8</html>
接下来,在<head>标签中,您将为此页面设置的字符添加一个meta标签,页面标题的title元素,定义该页面应该如何在移动设备上处理的meta标签,以及要加载的CSS文件:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="UTF-8" />
6 <title>Text Layout</title>
7 <meta name="viewport" content="width=device-width" />
8 <link rel="preconnect" href="https://fonts.gstatic.com" />
9 <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@700&display=swap" rel="stylesheet" />
10 <link href="styles.css" rel="stylesheet" />
11 </head>
12 <body>
13 </body>
14</html>
请注意, CSS 文件包括来自 [Google 字体] 的几个字体(https://fonts.google.com)和您将在本节中稍后创建的 styles.css 文件。
现在你将设置页面的<body>标签中包含的HTML内容. 此内容将包含在<article>中,其中将有<h1>元素,每个元素的<h2>和<h3>元素的两对,以及整个的<p>元素。 您将填写这些标签从Cupcake Ipsum(http://www.cupcakeipsum.com)填充文本生成器的文本内容。
将HTML应用到您的index.html,如下代码块的突出部分所示:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 ...
6 </head>
7 <body>
8 <article>
9 <h1>Sugar plum chupa chups chocolate bar cupcake donut</h1>
10 <h2>Tootsie roll oat cake macaroon</h2>
11 <p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum <strong>I love fruitcake pastry</strong>. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
12 <p>Cupcake donut topping <em><strong>chupa chups halvah</strong></em> chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
13 <h2>Jelly beans tiramisu pastry danish donut</h2>
14 <h3>Lemon drops pastry marshmallow</h3>
15 <p>I love marshmallow candy. <em>Sesame snaps</em> muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
16 <p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu <strong>soufflé powder caramels</strong> I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
17 <h3>Apple pie pudding topping</h3>
18 <p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. <strong><em>Wafer tootsie roll</em></strong> I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
19 <p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
20 </article>
21 </body>
22</html>
将所有这些添加到您的 index.html 文件中,然后在您的 Web 浏览器中打开该文件. 当您写您的风格时,请将 index.html 文件加载到您的浏览器中,以检查您的风格如何应用于内容:
接下来,在同一个目录中创建一个名为index.html的文件,名为styles.css,并在文本编辑器中打开新文件。
您将从 Google 字体中加载两个字体家族,第一个字体将是页面的默认字体,因为它将被页面上的所有内容使用。
创建一个body类型选择器,并使用字体堆Public Sans, sans-serif添加一个font-family`属性,将其设置为新的默认字体:
1[label styles.css]
2body {
3 font-family: 'Public Sans', sans-serif;
4}
这适用于体元素的字体.本示例中的所有内容将继承该字体,而无需单独声明。字体名称为 Public Sans,并且将有一个使用浏览器的默认sans-serif字体的倒退字体。
接下来,标题元素h1,h2和h3将为页面的其余部分提供一个名为Quicksand的特殊字体,创建一个由三个标题h1,h2,h3组成的组选择器,并使用Quicksand应用与body相同的字体堆栈设置:
1[label styles.css]
2body {
3 font-family: 'Public Sans', sans-serif;
4}
5
6h1, h2, h3 {
7 font-family: 'Quicksand', sans-serif;
8}
将您的更改保存到 styles.css,然后返回您的浏览器以重新加载 index.html. 定制字体现在将加载,如下图像所示:
对于设置文件的最后一部分,请返回文本编辑器中的styles.css文件,为h1,h2,h3和p元素创建单个类型选择器,为每个元素定义一个字体大小。
1[label styles.css]
2...
3h1, h2, h3 {
4 font-family: 'Quicksand', sans-serif;
5}
6
7h1 {
8 font-size: 2.5rem; /* 40px */
9}
10
11h2 {
12 font-size: 1.875rem; /* 30px */
13}
14
15h3 {
16 font-size: 1.5rem; /* 24px */
17}
18
19p {
20 font-size: 1.25rem; /* 20px */
21}
代码块包含一个评论,说明每个rem值将作为一个px单位返回什么。rem单元为用户提供了更大的控制权来调整字体大小到比px值允许的偏好比例。
将您的更改保存到 tyles.css,然后返回您的浏览器以重新加载 index.html 文件. 文本字体大小将调整为看起来类似于以下图像:
在本节中,您在index.html中设置了您的HTML内容,并创建了您的styles.css文件,您将Google字体字体应用于CSS在体元素上,具体用于h1,h2和h3元素,您还为页面上的所有文本元素设置了字体大小值。
改进线程长度使用宽度和最大宽度
在本节中,您将使用宽度和最大宽度属性为文本设置适当的行长。
网页打字的一个常被忽视的方面是文本列表的长度. 对于需要可访问性帮助的用户和不需要帮助的用户,一行长度对阅读文本所需的努力有很大贡献。
在文本编辑器中打开styles.css,写一个文章类型选择器来应用90%的宽度,并添加一个具有0自动值的边缘属性,这种组合将确保内容设置为屏幕宽度的90%,而边缘中的自动值将保持内容块在页面的中间:
1[label styles.css]
2...
3article {
4 margin: 0 auto;
5 width: 90%;
6}
将这些更改保存到styles.css,并在浏览器中重新加载index.html。文本将以中心为中心,但文本行将非常长。
理想的字符长度在45至75个字符之间,正如Clarissa Peterson(http://clarissapeterson.com)在她(https://www.youtube.com/watch?v=hjXPAtBJd-Y)中所解释的那样。长于75个字符,读者可以开始失去他们正在阅读的字符的痕迹。
根据字符数设置宽度是可能的,使用一个称为 character unit 的单位,代码中以ch表示。ch的单位是由字体中的零字符(0)的大小决定的。
回到文本编辑器中的styles.css文件,在文章类型选择器中的宽度属性之后,添加一个最大宽度属性,并给它一个值为70ch:
1[label styles.css]
2...
3article {
4 margin: 0 auto;
5 width: 90%;
6 max-width: 70ch;
7}
这意味着允许元素生长的最大宽度是该空间中使用的字体的70个零字符的宽度,这是体元素上设置的字体。
將這些變更儲存到「styles.css」檔案中,並在瀏覽器中重新加載「index.html」。 您將會發現頁面內的內容最長為大約 70 個字符。 嘗試調整瀏覽器的寬度,以便觀察「文章」容器從 90% 的寬度到最大寬度的過渡,如下動畫所示:
<$>[注] 注: CSS 技巧的 Chris Coyier 创建了一种 方便的书面标签工具,它将突出 45 到 75 之间的字符范围,以帮助找到最佳的宽度来设置您的内容。
在本节中,您了解到可访问性和可读性与文本内容的行长有着共同的基础。您使用宽度属性与最大宽度属性设置一个限制文本长度为45～75个字符的大小,使用ch单元。
使用线高属性来帮助可读性
您将使用本节中的线高属性来扩展和缩小文本行之间的空间。您可能会发现标题通常之间有较少的空间,而这段文本往往有更多的空间。 此间隔的目标是使内容更容易阅读。 类似于文本行的宽度,如果行过于紧密,读者可能会被上面或下面的行分散。
在文本编辑器中打开styles.css文件,然后转到body选择器中。 就像font-family一样,你会使用line-height来为整个文档设置线之间的默认距离。 添加line-height属性并给出1.5的值。 这个值是 baselines 之间的距离的测量,即文本底部的线:
1[label styles.css]
2body {
3 font-family: 'Public Sans', sans-serif;
4 line-height: 1.5;
5}
6...
线高的默认值与正常的关键字值有关,这相当于字体大小的 1.2。这意味着如果字体大小为 16px,那么线高当设置为正常时大约为 19.2px。
接下来,转到h1,h2,h3的组选择器,并将行高度值设置为1.15。这将使两行之间的文本更接近,并有助于呈现长标题。
1[label styles.css]
2...
3h1, h2, h3 {
4 font-family: 'Quicksand', sans-serif;
5 line-height: 1.15;
6}
7...
将您的更改保存到 styles.css,然后返回浏览器以重新加载 index.html. 您将发现内容的长度随着文本行之间的空间增加而扩大。
线高属性的值可以接受固定单位值,以及像素(px)或边框,但最好不要留任何单位,因为默认行为是将值乘以字体大小。
在本节中,您使用了线高属性,使页面上的内容更易于读取,读者更容易扫描,在下一节中,您将使用边缘属性来设置 HTML 中定义的内容类型之间的定义空间。
使用边际属性来间隔
在本节中,您将使用边缘属性以及相邻的兄弟选择器来应用文本元素之间的不同垂直间距。
首先,回到文本编辑器中的styles.css并找到h3选项,在这种情况下,您将为元素添加间隔,以便在文本上方有更多的空间,而在底部有更少的空间。
添加一个具有2em 0 0.5em值的边缘属性,这将适用于与字体大小值相对的间隔,这意味着顶部边缘将是48px的字体大小的两倍,底部将是12px的字体大小的一半:
1[label styles.css]
2...
3h3 {
4 font-size: 1.5rem; /* 24px */
5 margin: 2em 0 0.5em;
6}
7...
由于边缘在元素的外部工作,每个元素的边缘属性会重叠,这意味着虽然底部的h3``边缘相当于12px,但<p>元素的边缘更大,因此定义了<h3>和<p>之间的空间。
在文本编辑器中使用邻近的兄弟组合器为h3 + p创建一个新的选择器,然后在选择器块中添加一个值为0的边缘顶部属性:
1[label styles.css]
2...
3h3 {
4 font-size: 1.5rem; /* 24px */
5 margin: 2em 0 0.5em;
6}
7
8h3 + p {
9 margin-top: 0;
10}
11...
相邻的兄弟组合器的工作方式,这意味着当浏览器有一个<h3>元素,并立即跟随它是一个<p>元素时,这些风格只适用于那个<p>元素。
将您的更改保存到styles.css,并在浏览器中加载index.html。如下图像所示,在<h3>元素上方的空间现在要大得多,而在<h3>和<p>之后的空间就更近了。
在本节中,您使用边缘属性来应用页面元素之间的不同间隔. 使用相邻的兄弟选择器,您设置了条件,如果
元素之前有
元素,则将应用更大的间隔量。
使用text-align来有效地呈现内容
您现在将使用文本对齐属性来更改文本放置在一个行上。该属性有四个值:左、右、中心和合理化。此属性的默认值取决于浏览器的语言设置。对于从左到右阅读的语言,左是默认值,而阅读从右到左的语言则具有默认值正确。中心属性将文本放置在文本行的中心,并在文本行两侧留有相同的空白空间。
在文本编辑器中打开styles.css,找到h3类型选择器,添加一个具有中心值的text-align属性,如下列代码块的突出部分所示:
1[label styles.css]
2...
3h3 {
4 font-size: 1.5rem; /* 24px */
5 margin: 2em 0 0.5em;
6 text-align: center;
7}
8...
将您的更改保存到 styles.css,并在浏览器中重新加载 index.html 文件. 两个 h3 级别标题的内容现在集中在各自的部分之上。
最好将文本对齐属性设置为默认,因为这对用户及其设置来说是最好的。
您在本节中使用了文本对齐来中心其容器中的文本内容,您还了解了如何以及何时使用文本对齐属性的其他值,在下一节中,您将使用文本转换和字母间隔属性来创建视觉个性,同时保持文本可读性和保持高效的层次结构。
使用字母间隔和文本转换
接下来,您将使用文本转换属性和字母间隔属性来调整标题中的文本的外观方式。文本转换属性控制文本的格式化方式,提供将文本更改为上下或下下的选项,该属性将每个单词的第一个字母转换为资本。
开始使用text-transform属性,在文本编辑器中打开styles.css,然后进入h1类型选择器,因为这个标题是整个文章的标题,所以有一个标题案例格式化是有意义的。
添加一个具有资本化值的文本转换属性,这个值将以每个单词的第一个字母为主,无论它是否在HTML中为主:
1[label styles.css]
2...
3h1 {
4 font-size: 2.5rem; /* 40px */
5 text-transform: capitalize;
6}
7...
将此附件保存到您的 styles.css 文件中,然后在您的浏览器中打开 `index.html。 标题副本现在有每个单词的第一个字母,如下图所示。
接下来,回到文本编辑器中的styles.css文件,并找到h3类型选择器. 此时,您将设置h3风格为每个单词中的所有上级字母,通过添加一个text-transform属性,值为uppercase。
1[label styles.css]
2...
3h3 {
4 font-size: 1.5rem; /* 24px */
5 margin: 2em 0 0.5em;
6 text-align: center;
7 text-transform: uppercase;
8}
9...
完成此更改后,保存styles.css,然后在浏览器中刷新index.html。h3内容现在将完全清晰,无论它是如何写在HTML中。
<$>[注] 注: 当你使用 CSS 将 uppercase 样式应用到内容时,它可能会影响屏幕读者如何解释内容。例如,在 macOS 上使用 Voice Over,由 CSS 设置为 uppercase 的三个字母单词将被读取为缩写而不是作为一个单词。
现在,所有文本都是上面的,从视觉上看,文本对设计的审美感有点紧凑。接下来,使用字母间隔属性在每个字符之间添加0.125em间隔。
1[label styles.css]
2...
3h3 {
4 font-size: 1.5rem; /* 24px */
5 margin: 2em 0 0.5em;
6 text-align: center;
7 text-transform: uppercase;
8 letter-spacing: 0.125em;
9}
10...
在字母间隔属性上使用em单元允许字符之间的间隔与字体大小相比例。
将您的更改保存到 styles.css,并在浏览器中重新加载 index.html,以返回对 h3 内容的更改。
在本节中,您使用了text-transform属性来更改<h1>元素的风格,以使每个单词的第一个字母占有价值。您还使用了text-transform和letter-spacing属性来更改<h3>元素,以使所有字符分开的上层单词都分开。
使用短手字体
在这最后一节中,您将使用字体属性将多个属性缩小为一个属性。字体属性在全球定义多个与文本相关的值时可能有用,并在曲线中放置在一个高级别。
首先,回到文本编辑器中的styles.css文件,然后转到body选择器中。在这里font-family和line-height属性可以缩小为font短语属性,但是font短语需要存在font-size和font-family值,这意味着除了line-height和font-family值之外,还可以添加font-size值。请参阅以下代码块的突出部分,了解如何写出这个:
1[label styles.css]
2body {
3 font: 1em/1.5 'Public Sans', sans-serif;
4}
5...
请注意,在1em的字体大小值和1.5的线高值之间存在前进缩小(/)。这是用字体短语属性设置线高值的唯一方法,它必须在字体大小值之后出现。字体大小值被设置为1em,因为这是最不干扰的值,并且将文档的默认字体大小传递给文件,而不论其值如何。
请确保在文本编辑器中将您的更改保存为styles.css。在浏览器中重新加载index.html,并确保没有任何视觉更改。
您在本教程的最后一节中使用了字体属性,将多个属性合并为一个,缩小了您的CSS的大小,虽然非常有用,但必须谨慎使用,因为由于其广泛覆盖范围,它可能需要重新定义属性。
结论
可读的文本布局可以标志有效和无效的设计之间的区别。布局文本是一个主观的平衡,在文本行、单词和块之间提供足够的空间,以便以不显眼的方式呈现内容。
如果您想阅读更多 CSS 教程,请尝试 How To Style HTML with CSS series中的其他教程。