如何在 CSS 中使用字体、大小和颜色设置文本元素的样式

作者选择了技术多样性基金来接受捐赠，作为Write for DOnations计划的一部分。

层叠样式表 (CSS)是一种为两个学科设计的语言：程序员的学科和设计师的学科。使用网络上的文本是这种语言广泛可访问性的最明显例子之一。样式文本使用来自图形设计世界的概念，但调整命名约定以更广泛地实现。

在本教程中，您将学习网页排版，文字样式的艺术。与使用印刷机工作类似，您将设置您的内容，应用视觉风格来帮助传达内容，并调整内容以提高可读性和重点。在 Web 上设置样式文本的目的是通过颜色、大小、形状和空间创建视觉层次结构。这样，标题从子标题中脱颖而出，子标题从段落中脱颖而出。这些概念有助于使文本对读者更具可读性和可扫描性。

您将通过编写 HTML 结构开始本教程，该结构将由Cupcake Ipsum的占位符内容组成。（你会用不同的标题级别的工作h1– h6）和内容类型（p，strong，和em）申请多个文字相关的CSS属性，包括font-family，font-size，和color。您还将从第三方字体托管服务Google Fonts加载自定义字体。本教程的每一步都将引入一个新概念或一组新的属性来应用于内容。最后，您将拥有一个自定义样式的网页。

在第一步中，您将设置将在本教程的其余部分设置样式的 HTML。本教程中 HTML 的目的是提供各种元素和场景供您练习样式。

index.html使用文本编辑器打开文件，例如nano、Vim或Visual Studio Code。添加以下样板 HTML 以提供文件所需的基线代码：

该元素已加载到styles.css文件中，因此请确保也准备好该文件。

接下来，您需要一些内容来设计样式。创建文本样式时，项目通常需要在内容准备好之前使用样式。在图形设计领域，占位符内容用于此目的。设计人员通常会使用拉丁文本作为占位符，称为 Lorem Ipsum。这个占位符文本有许多现代版本，包括Cupcake Ipsum。这将是整个 HTML 中使用的参考副本。

首先，HTML 需要描述层次结构、明确的区分和内容顺序。在 HTML 中，标题标签从最顶部的标题到最底部的标题。标题的浏览器默认样式仅通过大小定义视觉层次结构，元素的默认值font-size明显大于. 在本教程中，您将使用其他设计原则（例如颜色和空间）为内容提供视觉层次结构。

要创建这种分层内容，您将写出各种标题，并在.cpp 中的标签内用 Cupcake Ipsum 中的几个词填充每个标题index.html。您将遵循正确的 HTML语义，它为浏览器提供准确的含义。

要有正确的 HTML 语义：

使用标题语义规则，将以下突出显示的 HTML 添加到index.html：

接下来，您需要一些内容来填充每个标题之间的空间。这些将是

元素指定的文本段落，用于保存每个段落。再次使用 Cupcake Ipsum 生成此内容并将段落放置在整个页面中。

添加以下代码块的突出显示部分。本教程将在整个代码块中使用这种格式：

Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum I love fruitcake pastry. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.

I love marshmallow candy. Sesame snaps 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.

Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu soufflé powder caramels 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.

Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. Wafer tootsie roll 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.

Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.

Cupcake donut topping chupa chups halvah 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.

最后，将 in 、、 和两个元素组合在一起。这将提供内容中强调的短语示例：

Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum I love fruitcake pastry. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.

I love marshmallow candy. Sesame snaps 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.

Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu soufflé powder caramels 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.

Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. Wafer tootsie roll 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.

Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.

Cupcake donut topping chupa chups halvah 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.

现在您已经编写了 HTML，保存index.html并在浏览器中打开它以查看使用浏览器默认样式的页面：

文本的大小范围跨越所有元素，默认和样式小于

文本。

在此步骤中，您将设置将在本教程的其余部分设置样式的 HTML 内容。接下来，您将使用该font-family属性，了解字体堆栈、浏览器可以使用的字体列表，并将字体应用于不同的元素。

接下来，您将使用font-familyCSS 属性并从Google Fonts服务加载外部字体文件。此属性的名称源自一个排版术语，该术语描述了字体集合和该字体的变体，包括粗体和斜体版本。一个字体可以有许多这样的变体，但都可以是同一个 的一部分font-family，这些变体称为 withfont-weight和font-style属性。

要开始使用font-family，了解有关其值选项的详细信息会很有帮助。font-family属性的值是称为字体堆栈的字体列表。字体堆栈用作后备系统。考虑以下font-family属性值：

浏览器首先要确定 Helvetica Neue 是否可供它使用，无论是作为安装在计算机上的字体还是作为网站提供的字体。如果浏览器没有找到名为 Helvetica Neue 的字体，则它会在列表中向下移动到 Helvetica，然后到 Arial。如果浏览器找不到任何这些字体，则列表中的最后一个字体sans-serif将使用浏览器设置为sans-serif样式字体的默认字体。

注意：字体堆栈提供的最佳功能不是在未找到字体时，而是在字体中未找到特定字符时。这对于使用多语言支持的实例尤其必要，其中一种字体可能没有涵盖所有语言需求的字符集。字体堆栈可以包含后备字体，该字体提供特殊字符和与堆栈中的主要字体类似的视觉感受。

创建一个名为文件styles.css在同一目录下index.html。在文本编辑器中打开它并为页面添加默认字体：

在这段代码中，你开始与一个body 类型选择一个font–family属性。接下来，对于以 开头的字体堆栈"Avenir Next"，它将在 iOS 和 macOS 浏览器上可用。Avenir Next用引号引起来，因为字体名称是两个词。下一个字体Calibri用于 Windows 浏览器。确保在每个字体声明之间放置一个逗号。为了提供更通用的字体后备，您可以使用Verdana，自 2000 年代初以来，它已在计算机上广泛使用。最后，由于所有这些字体都被归类为 sans serif 字体，因此您将浏览器默认值添加sans-serif为字体堆栈中的最终字体选项。

保存styles.css，然后index.html在浏览器中打开。您将找到一种新字体来代替内容的浏览器默认字体。如果您使用的是 Apple 操作系统，Avenir Next 将在浏览器中呈现。如果您使用的是 Windows，Calibri 将改为渲染。下图是此字体堆栈在 MacOS 上的样子：

在本节中，您使用该font-family属性为网页设置默认字体堆栈。您还设置了一个font-family专门应用于标题文本内容的属性。在下一部分中，您将使用 Google Fonts 服务加载自定义字体文件并在页面上使用它。

既然您font-family已经在计算机上安装了字体的情况下使用了该属性，那么是时候从外部服务加载字体了。这将扩大可用于设置文本样式的字体范围。在本节中，您将使用 Google Fonts 服务在网页上加载和使用字体。

浏览器可以加载任何字体，只要为该浏览器提供了适当的字体文件格式。字体服务（例如 Google Fonts）通过提供加载字体所需的 CSS 和字体文件来减轻定义和托管字体的工作。还有许多其他服务，例如 Google Fonts，但 Google Fonts 托管版税和开源字体并免费提供该服务。

首先，fonts.google.com在浏览器中打开。

您可以在 Google Fonts 中选择多种不同的字体。本教程将使用两个：Public Sans 和 Quicksand。

从 Google Fonts 的搜索字段中，搜索Public Sans。当搜索结果中出现字体卡时，会显示字体预览。点击卡片进入字体页面：

Public Sans 字体页面将列出该字体的所有变体。这些被称为weights，范围从 100 到 900。为了本教程的目的，找到常规(400) 和粗体(700) 样式，然后按每个样式变体旁边的+ 选择此样式按钮，以及他们的斜体样式。

选择第一个样式后，将滑入一个选定的系列工具。该工具将为您提供使用这些字体所需的 HTML 和 CSS：

选择在浏览器中加载字体的方法并复制提供的 HTML。打开index.html并在加载后将代码添加到元素中styles.css。保持 Google Fonts 打开，因为您将多次返回它：

此时，index.html在浏览器中重新加载不会有任何视觉变化。浏览器正在加载字体，但需要将字体添加到字体堆栈中才能将字体应用于内容。

返回到 Google Fonts 找到加载 Public Sans 的 CSS 规则。Google Fonts 提供了一个 Public Sans 字体堆栈和sans-serif带有font-family: 'Public Sans', sans-serif;. 由于您已经设置了后备字体的字体堆栈，因此您需要从 Google Fonts 的示例中获取引用 Public Sans 的名称。

使用您现有的字体堆栈styles.css，替换Avenir Next并Calibri使用Public Sans：

现在已经声明了基本字体堆栈，页面上的所有字体现在都是 Public Sans。

使标题更加受关注的一种常见设计做法是为标题使用与正文不同的字体。要将其应用于您自己的 HTML，请返回 Google Fonts 并搜索“Quicksand”。这将是页面上直通元素的标题或显示字体。

找到 Quicksand 后，选择字体卡并将半粗体(600) 和粗体(700) 字体粗细添加到 Public Sans 旁边的选定字体中。Google Fonts 将提供一个新 URL 来加载所有选定的字体和变体。交换文件中href新链接的先前值index.html：

现在 Quicksand 已设置为在浏览器中加载，您需要将其应用于标题标签。您将通过向您的文件添加一个以逗号分隔的 CSS 选择器列表（称为组选择器）来完成此styles.css操作。在这种情况下，请使用 Google Fonts 提供的字体堆栈和 Quicksand，后跟浏览器默认sans-serif字体：

保存更改styles.css并返回到浏览器重新加载index.html. 此时请随时关闭 Google Fonts。当浏览器加载时，您现在会发现显示了两种字体。Quicksand 现在出现在所有标题上，而 Public Sans 出现在所有其他内容上，包括粗体和斜体内容。

在本节中，您从 Google Fonts 服务加载了两种字体，并将这些字体添加到您现有的字体堆栈中。下一节将着眼于使用字体变体来指定何时以及如何将粗体和斜体应用于字体。

在本节中，您将使用font-weight和font-style属性来调整字体的显示方式。使用这些变体的原因有很多，例如作为引文样式指南的一部分强调内容，以及提供视觉变体。

现在您正在从 Google Fonts 加载自定义字体，您可以开始微调文本的特征。从font-weight属性开始，您可以更改字体显示的粗细。该font-weight属性有两个共同的值：normal和bold。该normal值是font-weight浏览器中大多数文本的默认值。该bold值是font-weight标题和元素的默认值。但是对于本教程，您将需要使用数值而不是名称normal和bold值。

数值font-weight取决于您加载的字体。当您从 Google Fonts 添加 Public Sans 字体时，您选择了常规 (400) 和粗体 (700) 字重。括号中的数字与引用和加载该字体所需的值一致。此外， 的font-weight值400是 的数值等价物normal，就像700的数值等价物一样bold。使用 Public Sans 的文本（除了标题之外的所有内容）将自动使用这些权重。

或者，Quicksand 字体选择包括半粗体 (600) 和粗体 (700) 字体粗细。该600值没有数字对应物，需要使用数字值来定义。

您将首先将font-weight所有标题的 设置600为 Quicksand的半粗体变体。在您的styles.css文件中，找到包含所有标题值的组选择器font-weight: 600;并向选择器块添加声明：

完成此更改后，保存styles.css并重新加载index.html浏览器。当标题从700Quicksand 的600值变为 值时，您会看到标题略微变细。

既然您已将所有标题元素设置为使用 Quicksand600粗细，仍有一些地方可以使用700字体的变体。首先，h3在您的styles.css文件中创建一个类型选择器并添加font-weight: 700;到选择器块中：

此更改将导致h3突出一点，因为它现在比其他标题更粗。随着教程的进行，您将对h3样式进行其他更改以使其脱颖而出，但仍保持其层次顺序。

将更改保存到styles.css并创建一个新的选择器，该选择器针对同时包含在和标签中的文本。在到目前为止编写的样式的情况下，这种文本将获得 Public Sans 的粗斜体变体。相反，将样式设置为使用 Quicksand 字体堆栈。

由于获得粗斜体样式的 HTML 是...and ...，您需要在styles.css文件中创建一个组合器组选择器，然后将font-family属性应用"Quicksand", sans-serif为值：

将此添加到styles.css文件中后，请保存它，然后index.html在浏览器中重新加载。粗斜体的文本现在正在使用 Quicksand 并且是斜体，即使 Google Fonts 没有提供该字体的斜体版本。这被称为仿斜体，浏览器理解默认情况下此内容应为斜体，但由于未定义斜体变体，因此会人为地倾斜文本。

处理文本是否斜体的属性是font-style。font-style属性的值选项是normal和italic。不要使用人造粗体，而是将此选择器的样式更改为没有斜体。将值为的属性添加到文件中的strong em, em strong组选择器：styles.cssfont-stylenormal

这会将粗斜体文本的实例更改为仅流沙粗体。

保存更改styles.css并index.html在浏览器中重新加载以查看更改：

您使用本节中的font-weight和font-style属性来应用从 Google Fonts 加载的 Quicksand 字体的变体。接下来，您将使用该font-size属性创建更大、更清晰的文本，标题之间的层次结构更清晰。

在本节中，您将使用该font-size属性对整个页面的内容应用不同的字体大小。文本的大小是传达信息的重要因素。大小合适的文本更易于阅读，大小合适的标题有助于传达层次结构，以便更轻松地浏览信息。您将更改font-size您创建的所有元素的 ，index.html以创建更具可读性的文档。

首先font-size在body元素上设置默认值。默认浏览器font-size是16px，但将许多字体放大一点有助于提高易读性。打开您的styles.css文件并将 a 添加font-size: 18px;到body元素：

index.html在浏览器中打开或刷新页面。在font-size上改变body元素改变了页面上的所有字体，增加它们的大小。

元素的默认字体大小是基于父元素相对大小的，在这种情况下是元素，使用字体大小的百分比值。使用该公式(target / base) * 100%将为您提供一个相对于元素上设置的基本字体大小的百分比值。

要尝试使用此公式，您需要将元素的目标设置font-size为。使用该公式，目标大小为，基本大小为，因此此公式为，即。这意味着 的预期大小将是 base 大小的 2.5 倍。45px45px18px(45 / 18) * 100%250%font-size

返回到您的styles.css文件并添加一个元素选择器，h1并添加一个font-size: 250%;属性和值来设置字体大小：

现在您已经为元素设置了相对字体大小，对剩余的标题元素应用相同的公式。对于每个，您可以选择舍入或保留完整的十进制值。留下解释目标大小甚至公式的评论也很有帮助。

打开您的styles.css文件并开始在h1 font-size解释渲染大小的属性后添加注释。然后对于每个标题应用公式，以便h2具有font-size等效的36px，h3等于32px，h4到26px，h5到22px，最后是h6到 的基本大小18px。元素的默认大小小于基本大小，因此将其设置为100%将确保它不会低于基本值：

返回浏览器并刷新index.html。所有标题都将font-size相对于元素上的默认font-size设置增加它们。下图显示了此更改将如何在浏览器中呈现：

在这一步中，您使用该font-size属性来更改网页上文本的大小。您使用大小的设计概念为默认浏览器样式之外的内容提供层次结构。在下一步中，您将使用该color属性进一步设计内容。

下一节的重点是colorCSS 属性，使用颜色来区分顺序并为内容添加含义。颜色是最常见的设计考虑因素之一，尤其是在定义文本的不同含义时。在本节中，您将使用命名颜色来设置文本颜色。命名颜色是多年来不断增长的预定义颜色的集合；它们与其他 Web 颜色值匹配，例如十六进制颜色代码。本节将使用在 Wikipedia 网页上的Web 颜色页面上找到的命名颜色列表。您可能希望在浏览器中保持 Wikipedia Web 颜色页面处于打开状态以供参考。

就像您对 所做的那样font-size，您将为整个文档设置默认颜色。这将影响页面上的所有内容，就像color大多数元素的继承值一样。记住颜色对比度很重要，因为它有助于易读性，尤其是在让所有视觉层次都可以访问网络时。由于background-color将保持默认的白色，因此使用粗体、较深的颜色是一个很好的指导。如果您想了解更多有关使用可访问的颜色对比度进行设计的信息，请观看有关该主题的简短视频系列。

要开始使用color，请styles.css在文本编辑器中返回到您的文件。正如您在该font-size部分中所做的那样，找到body选择器并添加一个color属性。大多数浏览器中文本的默认颜色是黑色。对于可访问的颜色对比度，重要的是在浅色背景上保持基色暗。使用命名的 color DarkSlateGray，为了清晰起见，这里只是驼峰式大小写，但如果您愿意，可以全部使用小写：

保存styles.css文件并index.html在浏览器中刷新。内容的颜色将从黑色变为深蓝绿色：

现在已经设置了基色，您可以开始使用其他颜色来提供更多的视觉层次。从文件中的h1选择器开始，styles.css然后添加color一个值为 的属性Indigo：

保存styles.css文件，返回浏览器，然后刷新index.html. 该文本现在有深紫色，而不是默认深蓝绿色：

接下来，您将对其他标题应用颜色。Quicksand 是一种有趣的圆形字体，您正在使用古怪的 Cupcake Ipsum 示例内容，因此通过在每个标题上使用不同的颜色来创建明亮而活泼的配色方案。返回styles.css并为每个标题选择器添加color属性和颜色值。为h2元素使用MediumVioletRed，为h3使用LimeGreen，为h4添加Chocolate，为h5使用Crimson，最后为h6使用DeepSky Blue：

将color属性添加到标题后，保存styles.css并返回浏览器刷新index.html。您的内容现在充满了色彩：

通过该color属性，您了解了 Web 颜色命名值以及如何使用颜色来提供含义。您还使用该color属性通过向网页内容添加彩色调色板来赋予内容个性。

处理文本是为 Web 编写 CSS 的主要部分。文本传达的意义不仅在于它所说的内容，还在于它的外观。使用您所学习的工具font-family，font-weight，font-style，font-size，和color属性，你可以操纵的文本来帮助你的网站提供有意义的情境。这些属性不仅限于本文中涵盖的标题：它们可以与任何包含文本的元素一起使用。

如果您想阅读更多 CSS 教程，请查看我们的CSS 主题页面。