基本文本和字体样式

¥What is involved in styling text in CSS?

元素内的文本布置在元素的 内容框 内。它从内容区域的左上角（或者对于 RTL 语言内容而言是右上角）开始，并流向行尾。一旦到达末尾，它就会下降到下一行并再次流到末尾。重复此模式，直到所有内容都已放入框中。文本内容的行为实际上类似于一系列内联元素，布置在彼此相邻的行上，并且在到达行尾之前不会创建换行符，或者除非你使用 <br> 元素手动强制换行符。

¥Text inside an element is laid out inside the element's content box. It starts at the top left of the content area (or the top right, in the case of RTL language content), and flows towards the end of the line. Once it reaches the end, it goes down to the next line and flows to the end again. This pattern repeats until all the content has been placed in the box. Text content effectively behaves like a series of inline elements, being laid out on lines adjacent to one another, and not creating line breaks until the end of the line is reached, or unless you force a line break manually using the <br> element.

注意：如果上面的段落让你感到困惑，那么没关系 - 在继续之前先回顾一下我们的 箱体模型 文章，温习一下盒模型理论。

¥Note: If the above paragraph leaves you feeling confused, then no matter — go back and review our Box model article to brush up on the box model theory before carrying on.

用于设置文本样式的 CSS 属性通常分为两类，我们将在本文中分别讨论：

¥The CSS properties used to style text generally fall into two categories, which we'll look at separately in this article:

• 字体样式：影响文本字体的属性，例如应用哪种字体、其大小以及是否为粗体、斜体等。
• 文本布局样式：影响文本的间距和其他布局功能的属性，例如允许操纵行和字母之间的间距，以及文本在内容框中的对齐方式。

注意：请记住，元素内的文本全部作为一个实体受到影响。你无法选择文本的子部分并为其设置样式，除非将它们封装在适当的元素（例如 <span> 或 <strong>）中，或者使用特定于文本的伪元素，例如 ::第一个字母（选择元素文本的第一个字母）、：：第一行 （选择元素文本的第一行）或 ::选择（选择光标当前高亮的文本）。

¥Note: Bear in mind that the text inside an element is all affected as one single entity. You can't select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong>), or use a text-specific pseudo-element like ::first-letter (selects the first letter of an element's text), ::first-line (selects the first line of an element's text), or ::selection (selects the text currently highlighted by the cursor).

¥Fonts

让我们直接看看样式字体的属性。在此示例中，我们将向以下 HTML 示例应用一些 CSS 属性：

¥Let's move straight on to look at properties for styling fonts. In this example, we'll apply some CSS properties to the following HTML sample:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

你可以找到 GitHub 上的完成示例（另请参阅 源代码）。

¥You can find the finished example on GitHub (see also the source code).

¥Color

color 属性设置所选元素的前景内容的颜色，通常是文本，但也可以包含其他一些内容，例如使用 text-decoration 属性在文本上放置下划线或上划线。

¥The color property sets the color of the foreground content of the selected elements, which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property.

color 可以接受任何 CSS 颜色单位，例如：

¥color can accept any CSS color unit, for example:

p {
  color: red;
}

这将导致段落变成红色，而不是标准浏览器默认的黑色，如下所示：

¥This will cause the paragraphs to become red, rather than the standard browser default of black, like so:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

¥Font families

要为文本设置不同的字体，可以使用 font-family 属性 - 这允许你为浏览器指定要应用于所选元素的字体（或字体列表）。仅当正在访问网站的计算机上可用时，浏览器才会应用字体；如果没有，它将只使用浏览器 默认字体。一个简单的例子如下所示：

¥To set a different font for your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser default font. A simple example looks like so:

p {
  font-family: Arial;
}

这将使页面上的所有段落都采用任何计算机上都可以找到的 arial 字体。

¥This would make all paragraphs on a page adopt the arial font, which is found on any computer.

网络安全字体

¥Web safe fonts

说到字体可用性，只有一定数量的字体通常在所有系统上都可用，因此可以放心使用。这些就是所谓的网络安全字体。

¥Speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called web safe fonts.

大多数时候，作为网络开发者，我们希望对用于显示文本内容的字体进行更具体的控制。问题是找到一种方法来了解用于查看网页的计算机上可以使用哪种字体。我们无法在每种情况下都知道这一点，但众所周知，网络安全字体在最常用的操作系统（Windows、macOS、最常见的 Linux 发行版、Android 和 iOS）的几乎所有实例上都可用。

¥Most of the time, as web developers we want to have more specific control over the fonts used to display our text content. The problem is to find a way to know which font is available on the computer used to see our web pages. There is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (Windows, macOS, the most common Linux distributions, Android, and iOS).

实际的网络安全字体列表将随着操作系统的发展而变化，但至少目前认为以下字体是网络安全的是合理的（由于 90 年代末和 2000 年代初的 Microsoft Web 的核心字体 计划，其中许多字体已得到普及） :

¥The list of actual web safe fonts will change as operating systems evolve, but it's reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the Microsoft Core fonts for the Web initiative in the late 90s and early 2000s):

注意：在各种资源中，cssfontstack.com 网站维护了 Windows 和 macOS 操作系统上可用的网络安全字体列表，这可以帮助你决定哪些字体可以安全使用。

¥Note: Among various resources, the cssfontstack.com website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.

注意：有一种方法可以随网页一起下载自定义字体，以便你以任何你想要的方式自定义字体使用：网络字体。这有点复杂，我们将在模块后面的 单独的文章 中讨论它。

¥Note: There is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: web fonts. This is a little bit more complex, and we will discuss it in a separate article later on in the module.

默认字体

¥Default fonts

CSS 定义了五种字体通用名称：serif、sans-serif、monospace、cursive 和 fantasy。这些都是非常通用的，并且这些通用名称所使用的确切字体在每个浏览器和它们显示的每个操作系统之间可能有所不同。它代表了最坏的情况，浏览器将尽力提供看起来合适的字体。serif、sans-serif 和 monospace 是相当可预测的，并且应该提供一些合理的内容。另一方面，cursive 和 fantasy 不太可预测，我们建议非常小心地使用它们，边做边测试。

¥CSS defines five generic names for fonts: serif, sans-serif, monospace, cursive, and fantasy. These are very generic and the exact font face used from these generic names can vary between each browser and each operating system that they are displayed on. It represents a worst case scenario where the browser will try its best to provide a font that looks appropriate. serif, sans-serif, and monospace are quite predictable and should provide something reasonable. On the other hand, cursive and fantasy are less predictable and we recommend using them very carefully, testing as you go.

这五个名称的定义如下：

¥The five names are defined as follows:

My big red elephant

body {
  font-family: serif;
}

  </td>
</tr>
<tr>
  <td><code>sans-serif</code></td>
  <td>没有衬线的字体。</td> 
  <td id="sans-serif-example">
    <pre class="brush: html hidden">My big red elephant</pre>
    <pre class="brush: css hidden">

  </td>
</tr> 
<tr>
  <td><code>monospace</code></td>
  <td>
    每个字符具有相同宽度的字体，通常用于代码列表。
  </td> 
  <td id="monospace-example">
    <pre class="brush: html hidden">My big red elephant</pre>
    <pre class="brush: css hidden">

  </td>
</tr>
<tr>
  <td><code>cursive</code></td>
  <td>
    旨在模拟手写的字体，具有流畅、连接的笔画。
  </td> 
  <td id="cursive-example">
    <pre class="brush: html hidden">My big red elephant</pre>
    <pre class="brush: css hidden">

  </td>
</tr> 
<tr>
  <td><code>fantasy</code></td>
  <td>用于装饰的字体。</td> 
  <td id="fantasy-example">
    <pre class="brush: html hidden">My big red elephant</pre>
    <pre class="brush: css hidden">

  </td>
</tr>

字体堆栈

¥Font stacks

由于你无法保证要在网页上使用的字体的可用性（即使是网络字体也可能由于某种原因而失败），因此你可以提供字体堆栈，以便浏览器可以选择多种字体。这涉及到由逗号分隔的多个字体名称组成的 font-family 值，例如，

¥Since you can't guarantee the availability of the fonts you want to use on your webpages (even a web font could fail for some reason), you can supply a font stack so that the browser has multiple fonts it can choose from. This involves a font-family value consisting of multiple font names separated by commas, e.g.,

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

在这种情况下，浏览器从列表的开头启动，并查看该字体是否在计算机上可用。如果是，则会将该字体应用于所选元素。如果没有，它将移至下一个字体，依此类推。

¥In such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. If it is, it applies that font to the selected elements. If not, it moves on to the next font, and so on.

在堆栈末尾提供合适的通用字体名称是一个好主意，这样如果没有列出的字体可用，浏览器至少可以提供大约合适的名称。为了强调这一点，如果没有其他选项可用，段落将被赋予浏览器的默认衬线字体（通常是 Times New Roman），这对于无衬线字体来说是没有好处的！

¥It is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. To emphasize this point, paragraphs are given the browser's default serif font if no other option is available — which is usually Times New Roman — this is no good for a sans-serif font!

注意：虽然你可以使用包含空格的字体系列名称（例如 Trebuchet MS）而不用引号引起来，以避免转义错误，但建议引用包含空格、数字或连字符以外的标点符号的字体系列名称。

¥Note: While you can use font family names that contain a space, such as Trebuchet MS, without quoting the name, to avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens.

警告：任何可能被误解为通用系列名称或 CSS 范围关键字的字体系列名称都必须加引号。虽然字体系列名称可以作为 <custom-ident> 或 <string> 包含在内，但碰巧与 CSS 范围的属性值相同的字体系列名称（例如 initial 或 inherit）或 CSS 与通用名称具有相同的名称 字体系列名称（例如 sans-serif 或 fantasy）必须作为带引号的字符串包含在内。否则，字体系列名称将被解释为等效的 CSS 关键字或通用系列名称。当用作关键字时，通用字体系列名称（serif、sans-serif、monospace、cursive 和 fantasy）和全局 CSS 关键字不得加引号，因为字符串不会解释为 CSS 关键字。

¥Warning: Any font family name which could be misinterpreted as a generic family name or a CSS-wide keyword must be quoted. While the font-family names can be included as a <custom-ident> or a <string>, font family names that happen to be the same as a CSS-wide property value, like initial, or inherit, or CSS have the same name as one to the generic font family names, like sans-serif or fantasy, must be included as a quoted string. Otherwise, the font family name will be interpreted as being the equivalent CSS keyword or generic family name. When used as keywords, the generic font family names —serif, sans-serif, monospace, cursive, and fantasy — and the global CSS keywords MUST NOT be quoted, as strings are not interpreted as CSS keywords.

字体系列示例

¥A font-family example

让我们添加到前面的示例中，为段落指定无衬线字体：

¥Let's add to our previous example, giving the paragraphs a sans-serif font:

p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

这给了我们以下结果：

¥This gives us the following result:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

¥Font size

在我们之前模块的 CSS 值和单位 文章中，我们回顾了长度和尺寸单位。字体大小（使用 font-size 属性设置）可以采用大多数这些单位（以及其他单位，例如 percentages）测量的值；但是，用于调整文本大小的最常见单位是：

¥In our previous module's CSS values and units article, we reviewed length and size units. Font size (set with the font-size property) can take values measured in most of these units (and others, such as percentages); however, the most common units you'll use to size text are:

• px（像素）：你希望文本的像素高度。这是一个绝对单位 - 在几乎任何情况下，它都会为页面上的字体产生相同的最终计算值。
• em：1 em 等于我们正在设置样式的当前元素的父元素上设置的字体大小（更具体地说，是父元素中包含的大写字母 M 的宽度）。如果你有许多设置了不同字体大小的嵌套元素，这可能会变得很棘手，但这是可行的，如下所示。何必呢？一旦你习惯了它就很自然了，你可以使用 em 来调整所有内容的大小，而不仅仅是文本。你可以使用 em 来调整整个网站的大小，这使得维护变得容易。
• rem：它们的工作方式与 em 类似，只不过 1 rem 等于文档根元素（即 <html>）而不是父元素上设置的字体大小。这使得计算字体大小变得更加容易。

元素的 font-size 继承自该元素的父元素。这一切都从整个文档的根元素 - <html> 开始 - 其标准 font-size 在浏览器中设置为 16px。根元素内的任何段落（或浏览器未设置不同大小的另一个元素）的最终大小均为 16px。其他元素可能具有不同的默认大小。例如，默认情况下，h1 元素的大小设置为 2em，因此它的最终大小将为 32px。

¥The font-size of an element is inherited from that element's parent element. This all starts with the root element of the entire document — <html> — the standard font-size of which is set to 16px across browsers. Any paragraph (or another element that doesn't have a different size set by the browser) inside the root element will have a final size of 16px. Other elements may have different default sizes. For example, an h1 element has a size of 2em set by default, so it will have a final size of 32px.

当你开始更改嵌套元素的字体大小时，事情变得更加棘手。例如，如果你的页面中有一个 <article> 元素，并将其 font-size 设置为 1.5 em（这将计算为 24 px 最终大小），然后希望 <article> 元素内的段落的计算字体大小为 20 px， 你会使用什么 em 值？

¥Things become more tricky when you start altering the font size of nested elements. For example, if you had an <article> element in your page, and set its font-size to 1.5 em (which would compute to 24 px final size), and then wanted the paragraphs inside the <article> elements to have a computed font size of 20 px, what em value would you use?

<!-- document base font-size is 16px -->
<article>
  <!-- If my font-size is 1.5em -->
  <p>My paragraph</p>
  <!-- How do I compute to 20px font-size? -->
</article>

你需要将其 em 值设置为 20/24，或 0.83333333 em。数学可能很复杂，因此你需要谨慎对待事物的风格。最好使用 rem 来保持简单，并尽可能避免设置容器元素的 font-size。

¥You would need to set its em value to 20/24, or 0.83333333 em. The maths can be complicated, so you need to be careful about how you style things. It is best to use rem where you can to keep things simple, and avoid setting the font-size of container elements where possible.

¥Font style, font weight, text transform, and text decoration

CSS 提供了四个常见属性来改变文本的视觉权重/强调：

¥CSS provides four common properties to alter the visual weight/emphasis of text:

• font-style：用于打开或关闭斜体文本。可能的值如下（你很少会使用它，除非你出于某种原因想要关闭某些斜体样式）：
  • normal：将文本设置为正常字体（关闭现有斜体）。
  • italic：将文本设置为使用字体的斜体版本（如果可用）；如果没有，它将用斜体模拟斜体。
  • oblique：将文本设置为使用斜体字体的模拟版本，该斜体字体是通过倾斜正常版本创建的。
• font-weight：设置文本的粗体程度。如果你有许多可用的字体变体（例如 -light、-normal、-bold、-extrabold、-black 等），这有许多可用值，但实际上，除了 normal 和 bold 之外，你很少会使用它们中的任何一个 :
  • normal, bold:正常和粗体字体粗细。
  • lighter, bolder:将当前元素的粗体设置为比其父元素的粗体轻或重一级。
  • 100 - 900：如果需要，数字粗体值可提供比上述关键字更细粒度的控制。
• text-transform：允许你设置要转换的字体。值包括：
  • none：防止任何转变。
  • uppercase：将所有文本转换为大写。
  • lowercase：将所有文本转换为小写。
  • capitalize：将所有单词转换为第一个字母大写。
  • full-width：将所有字形转换为写入固定宽度的正方形内，类似于等宽字体，允许将拉丁字符等与亚洲语言字形（如中文、日文、韩文）对齐。
• text-decoration：设置/取消设置字体上的文本装饰（你主要使用它来在设置链接样式时取消设置链接上的默认下划线）。可用值为：
  • none：取消设置任何已存在的文本装饰。
  • underline：为文本加下划线。
  • overline：为文本添加上划线。
  • line-through：在文本上添加删除线。
  你应该注意，如果你想同时添加多个装饰，则 text-decoration 可以一次接受多个值，例如 text-decoration: underline overline。另请注意，text-decoration 是 text-decoration-line、text-decoration-style 和 text-decoration-color 的简写属性。你可以使用这些属性值的组合来创建有趣的效果，例如：text-decoration: line-through red wavy。

让我们看看在我们的示例中添加几个这样的属性：

¥Let's look at adding a couple of these properties to our example:

我们的新结果是这样的：

¥Our new result is like so:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

¥Text drop shadows

你可以使用 text-shadow 属性将阴影应用到文本。这最多需要四个值，如下例所示：

¥You can apply drop shadows to your text using the text-shadow property. This takes up to four values, as shown in the example below:

text-shadow: 4px 4px 5px red;

这四个属性如下：

¥The four properties are as follows:

1. 阴影相对于原始文本的水平偏移 — 这可以采用大多数可用的 CSS 长度和尺寸单位，但你最常用的是 px；正值将阴影向右移动，负值向左移动。必须包含该值。
2. 阴影相对于原始文本的垂直偏移。这与水平偏移的行为类似，只是它向上/向下移动阴影，而不是向左/向右移动。必须包含该值。
3. 模糊半径：值越高意味着阴影分散得越广。如果不包含该值，则默认为 0，即不模糊。这可以采用大多数可用的 CSS 长度和尺寸单位。
4. 阴影的基色，可以取任何 CSS 颜色单位。如果不包含，则默认为 currentcolor，即阴影的颜色取自元素的 color 属性。

多重阴影

¥Multiple shadows

你可以通过包含用逗号分隔的多个阴影值来将多个阴影应用于同一文本，例如：

¥You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:

h1 {
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
}

如果我们将其应用于 Tommy The Cat 示例中的 h1 元素，我们最终会得到以下结果：

¥If we applied this to the h1 element in our Tommy The Cat example, we'd end up with this:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

注意：你可以在 Sitepoint 文章 兼职 CSS text-shadow 中看到更有趣的 text-shadow 用法示例。

¥Note: You can see more interesting examples of text-shadow usage in the Sitepoint article Moonlighting with CSS text-shadow.

¥Text layout

了解了基本的字体属性后，让我们看一下可用于影响文本布局的属性。

¥With basic font properties out of the way, let's have a look at properties we can use to affect text layout.

¥Text alignment

text-align 属性用于控制文本在其包含的内容框中的对齐方式。下面列出了可用的值。它们的工作方式与常规文字处理应用几乎相同：

¥The text-align property is used to control how text is aligned within its containing content box. The available values are listed below. They work in pretty much the same way as they do in a regular word processor application:

• left：左对齐文本。
• right：使文本右对齐。
• center：使文本居中。
• justify：使文本展开，改变单词之间的间隙，使所有文本行的宽度相同。你需要小心使用它 - 它可能看起来很糟糕，尤其是当应用于包含大量长单词的段落时。如果你打算使用它，你还应该考虑使用其他东西，例如 hyphens，来跨行打破一些较长的单词。

如果我们在示例中将 text-align: center; 应用于 h1，我们最终会得到以下结果：

¥If we applied text-align: center; to the h1 in our example, we'd end up with this:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

¥Line height

line-height 属性设置每行文本的高度。该属性不仅可以取大多数 长度和尺寸单位，还可以取无单位值，充当乘数，通常被认为是最佳选择。对于无单位值，font-size 相乘并得到 line-height。当行间隔开时，正文通常看起来更好并且更容易阅读。建议的行高约为 1.5 – 2（双倍行距）。要将文本行设置为字体高度的 1.6 倍，我们可以使用：

¥The line-height property sets the height of each line of text. This property can not only take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option. With a unitless value, the font-size gets multiplied and results in the line-height. Body text generally looks nicer and is easier to read when the lines are spaced apart. The recommended line height is around 1.5 – 2 (double spaced). To set our lines of text to 1.6 times the height of the font, we'd use:

p {
  line-height: 1.6;
}

将其应用于示例中的 <p> 元素将得到以下结果：

¥Applying this to the <p> elements in our example would give us this result:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

¥Letter and word spacing

letter-spacing 和 word-spacing 属性允许你设置文本中字母和单词之间的间距。你不会经常使用它们，但可能会发现它们可以用来获得特定的外观，或者提高特别密集的字体的易读性。他们可以拿走大多数 长度和尺寸单位。

¥The letter-spacing and word-spacing properties allow you to set the spacing between letters and words in your text. You won't use these very often, but might find a use for them to obtain a specific look, or to improve the legibility of a particularly dense font. They can take most length and size units.

为了说明这一点，我们可以对 HTML 示例中每个 <p> 元素的第一行应用一些单词和字母间距：

¥To illustrate, we could apply some word- and letter-spacing to the first line of each <p> element in our HTML sample with:

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

这会将我们的 HTML 呈现为：

¥This renders our HTML as:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
  letter-spacing: 2px;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 1px;
}

¥Other properties worth looking at

上述属性让你了解如何开始在网页上设置文本样式，但你还可以使用更多属性。我们只想在这里介绍最重要的内容。一旦你习惯了上述内容，你还应该探索以下内容：

¥The above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. We just wanted to cover the most important ones here. Once you've become used to using the above, you should also explore the following:

字体样式：

¥Font styles:

• font-variant：在小型大写字母和普通字体之间切换。
• font-kerning：打开和关闭字体字距调整选项。
• font-feature-settings：打开和关闭各种 OpenType 字体功能。
• font-variant-alternates：控制给定字体的替代字形的使用。
• font-variant-caps：控制备用大写字形的使用。
• font-variant-east-asian：控制东亚文字（例如日语和中文）的替代字形的使用。
• font-variant-ligatures：控制文本中使用哪些连字和上下文形式。
• font-variant-numeric：控制数字、分数和序数标记的替代字形的使用。
• font-variant-position：控制作为上标或下标放置的较小尺寸的替代字形的使用。
• font-size-adjust：独立于实际字体大小调整字体的视觉大小。
• font-stretch：在给定字体的可能替代拉伸版本之间切换。
• text-underline-position：使用 text-decoration-line 属性 underline 值指定下划线设置的位置。
• text-rendering：尝试执行一些文本渲染优化。

文本布局样式：

¥Text layout styles:

• text-indent：指定文本内容第一行开始之前应保留多少水平空间。
• text-overflow：定义如何向用户发出未显示的溢出内容信号。
• white-space：定义如何处理元素内的空格和关联的换行符。
• word-break：指定是否在单词内换行。
• direction：定义文本方向。（这取决于语言，通常最好让 HTML 处理该部分，因为它与文本内容相关。）
• hyphens：打开和关闭受支持语言的连字符。
• line-break：放松或加强亚洲语言的换行。
• text-align-last：定义强制换行之前块或行的最后一行的对齐方式。
• text-orientation：定义行中文本的方向。
• overflow-wrap：指定浏览器是否可以在单词中换行以防止溢出。
• writing-mode：定义文本行是水平还是垂直布局以及后续行的流动方向。

¥Font shorthand

许多字体属性也可以通过简写属性 font 设置。它们按以下顺序编写：font-style、font-variant、font-weight、font-stretch、font-size、line-height 和 font-family。

¥Many font properties can also be set through the shorthand property font. These are written in the following order: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

在所有这些属性中，使用 font 简写属性时仅需要 font-size 和 font-family。

¥Among all those properties, only font-size and font-family are required when using the font shorthand property.

必须在 font-size 和 line-height 属性之间添加正斜杠。

¥A forward slash has to be put in between the font-size and line-height properties.

完整的示例如下所示：

¥A full example would look like this:

font:
  italic normal bold normal 3em/1.5 Helvetica,
  Arial,
  sans-serif;

¥Active learning: Playing with styling text

在这个主动学习课程中，我们没有任何具体的练习供你做。我们只是希望你能够很好地使用一些字体/文本布局属性。亲自看看你能想出什么！你可以使用离线 HTML/CSS 文件来执行此操作，也可以将代码输入到下面的实时可编辑示例中。

¥In this active learning session we don't have any specific exercises for you to do. We'd just like you to have a good play with some font/text layout properties. See for yourself what you can come up with! You can either do this using offline HTML/CSS files, or enter your code into the live editable example below.

如果你犯了错误，你可以随时使用“重置”按钮进行重置。

¥If you make a mistake, you can always reset it using the Reset button.

<div
  class="body-wrapper"
  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea
    id="code"
    class="html-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
<p>Some sample text for your delight</p>
  </textarea>

  <h2>CSS Input</h2>
  <textarea
    id="code"
    class="css-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
p {

}
  </textarea>

  <h2>Output</h2>
  <div
    class="output"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input
      id="reset"
      type="button"
      value="Reset"
      style="margin: 10px 10px 0 0;" />
  </div>
</div>

const htmlInput = document.querySelector(".html-input");
const cssInput = document.querySelector(".css-input");
const reset = document.getElementById("reset");
let htmlCode = htmlInput.value;
let cssCode = cssInput.value;
const output = document.querySelector(".output");

const styleElem = document.createElement("style");
const headElem = document.querySelector("head");
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", () => {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

¥Summary

我们希望你喜欢本文中的文字！下一篇文章将为你提供有关 HTML 列表样式 你需要了解的所有信息。

¥We hope you enjoyed playing with text in this article! The next article will provide you with all you need to know about styling HTML lists.