Logo

菜单

发布于 2026-01-06 6 阅读
0

CSS Typography DEV 的全球展示挑战赛由 Mux 赞助：展示你的项目！

CSS排版

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

你是否曾经偶然发现一个网站，然后问自己以下一个或多个问题：

  • 我该如何阅读这篇文章？
  • 这是谁做的？

然后你访问另一个网站，你会惊叹：“哇！这太酷了！”。现在让我们问自己两个问题：

  • 您觉得第一个网站难以阅读或无法使用的原因是什么？
  • 第二个网站有哪些吸引人的地方？

对于第二个网站，你可能会不停地滚动浏览，可能不会真正阅读任何内容，但你会惊叹于网站开发者的作品。

影响网站可读性和用户体验的因素有很多，其中包括：

  • 布局
  • 颜色组合
  • 动画片
  • 排版

我们将讨论最后一个提到的因素：字体排印。

排版可以被视为字母和字体的艺术。这两者如何相互协调，才能为用户创造良好的阅读体验，同时还要保证每行字符数的适宜性。

这篇文章并非对排版概念的全面阐述，而是对使用层叠样式表 (CSS) 进行Web 排版的简要介绍。

我们或许正在讨论网络排版，但值得一提的是那些花费时间研究和撰写排版相关著作的学者，尤其是罗伯特·布林赫斯特（Robert Bringhurst ）的著作《排版风格的要素》（The Elements of Typographic Style）。以下摘自该书序言（重点为笔者所加）：

排版是一门赋予人类语言持久视觉形式，从而赋予其独立存在的技艺。它的核心是书法——在微小的舞台上，鲜活的、会说话的手的舞蹈——它的根扎入肥沃的土壤，尽管它的枝干每年都可能挂满新的机器。只要根系尚存，排版就永远是真正愉悦、真正知识和真正惊喜的源泉。

这不是很美吗？我们继续吧。

p网页文档中的大多数文本都用段落标签（ ）包围，并根据源文档的语言从左到右（ltr）或从右到左（rtl）流动。如果文本不能放在一行中，它们会换行显示，这可能会导致用户阅读困难，因为大多数 HTML 元素（包括标签）的默认用户代理p样式都不同。

CSS 提供了一系列工具和技术，可以用来缓解这些阅读困难，并提升阅读体验，营造出完美的网页排版效果。这些工具以属性的形式存在，其中包括：

  • font-size
  • font-weight
  • line-height
  • font-family

这些技术可能包括：

  • 垂直节律
  • 响应式排版

理论就说到这里，现在该写代码了。

保存以下 HTML 和 CSS 文件，并确保 CSS 文件与 HTML 文件链接。

<header>
  <h1>CSS Typography</h1>
</header>
<main>
  <section>
    <p class="paragraph-1">Lorem ipsum dolor sit amet,
      consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit
      in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident,
      sunt in culpa qui officia deserunt mollit anim id est
      laborum.
    </p>

    <p class="paragraph-2"><!-- Duplicate the content of .paragraph-1 --></p>

    <p class="paragraph-3"><!-- Duplicate the content of .paragraph-1 --></p>

  </section>
</main>
Enter fullscreen mode Exit fullscreen mode 
/*
 * This code is similar to the snippet we used in
 * CSS Media Queries https://dev.to/ziizium/css-media-queries-14fa
*/

header {
  padding: 1.2em;
  text-align: center;
  background-color: #1560bd;
  color: #ffffff;
}

main {
  background-color: #dddddd;
  padding: 1.2em;
}
Enter fullscreen mode Exit fullscreen mode

请注意，所有屏幕截图均来自Firefox 70浏览器及其开发者工具。

如果我们查看浏览器中的 HTML 代码，就会发现文本难以阅读。

蓝灰色背景上的文字

段落文本设置为其默认值font-size，16px即浏览器默认值，您可以使用开发者工具确认这一点。

蓝灰色背景上的文字

首先，我们要添加的属性font-family接受以逗号分隔的字体名称值。我们可以将其应用于font-family整个文档，也可以仅应用于特定部分。

让我们把它应用到body元素上：

/* Create a declaration for the body tag */

body {
  font-family: Georgia, "Trebuchet Ms"; /* Add this */
}
Enter fullscreen mode Exit fullscreen mode

接下来我们需要修改font-size段落文本。

/* Create a declaration for the p tag */

p {
  font-size: 1.3em; /*Add this */
}
Enter fullscreen mode Exit fullscreen mode

保存并刷新浏览器。

蓝灰色背景上的文字

文本可读性有所提高，但文本行看起来有些拥挤。我们将利用该line-height属性为文本留出一些空间。

来自Mozilla 开发者网络：

CSS 属性 line-height 用于设置行框的高度。它通常用于设置文本行之间的距离。

请将 CSS 规则更新p为以下内容：

p {
  /* All other properties remain the same */

  /* Note the we've used a unit less line-height for simplicity */

  line-height: 1.618; /* Add this */
}
Enter fullscreen mode Exit fullscreen mode

如果你在浏览器中查看 HTML 文件，你会发现可读性有所提高，但我们可以通过在字母之间添加一些空格来进一步提升。这就是letter-spacing空格的作用所在。

来自MDN：

letter-spacing CSS 属性设置文本字符之间的间距行为。

请对以下内容进行修改p：

p {
  /* All other properties remain the same */

  letter-spacing: 0.02em; /* Add this */
}
Enter fullscreen mode Exit fullscreen mode

浏览器中显示的结果：

蓝灰色背景上的文字

我们目前取得了一些进展，但每行字数太多了。最好的办法是减小文本父容器（即main元素）的宽度。

main {
  /* All other properties remain the same */

  width: 60%;
  margin: 0 auto;   /* This will align the main to the center of the page */
}
Enter fullscreen mode Exit fullscreen mode

保存并刷新浏览器。

蓝灰色背景上的文字

让我们对代码进行一些改进：

p {
  /* All other properties remain the same */

  font-size: 1.5em;   /* These are just */
  line-height: 1.8;   /* updated values */
}
Enter fullscreen mode Exit fullscreen mode

保存并在浏览器中查看输出结果，您会发现变化微乎其微。

CSS 提供了一些选择器，可以用来给文本添加一些炫酷效果，在这里我们可以使用其中的两个选择器：

  • ::first-line
  • ::first-letter

官方来说，这些选择器被称为伪元素。

它::first-line会选中文本的第一行，这样我们就可以按照想要的方式设置它的样式。为了简单起见，我们只将其font-weight加粗。

/*
 * We are only working with the first paragraph hence
 * we using the class selector with the pseudo element
 * selector.
*/

.paragraph-1::first-line {
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

该::first-letter选择器严格应用于包含文本的容器元素的首字母。

以下代码片段将增加font-size首字母的值.paragraph-1：

/*
 * Here are using the ::first-letter selector to get
 * the first letter of the paragraph
 *
*/

.paragraph-1::first-letter {
  font-size: 120px;
}
Enter fullscreen mode Exit fullscreen mode

浏览器中的显示效果不太好。

蓝灰色背景上的文字

要解决此问题，需要应用该float属性，其值为，left并设置一些margin外间距。


.paragraph-1::first-letter {

  /* All other properties remain the same */

  float: left;         /* This will move the letter to the left of its parent */
  margin-right: 12px;  /* Some outer spacing to keep the letter away from other text*/
  margin-top: 0.15em;  /* This will let it align with the rest of the line */
}
Enter fullscreen mode Exit fullscreen mode

输出结果应该会更好。

蓝灰色背景上的文字

我们的网页目前已经可以阅读，但我们可以通过添加一些垂直韵律来做一些小小的改进。

垂直韵律是网页排版中的一个概念，指的是在文本块之间留出一些空白以提高可读性。

我们可以使用 CSSmargin属性来获取这个空间。请记住，它margin是其他四个属性的简写形式，它们分别是：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

这个margin-bottom属性能给我们带来所需的垂直节奏感，因为每段文本都位于一个块级元素（即p标签）中。我们应该很清楚地记得，块级元素是垂直排列的，一个接一个。

因此，margin-bottom每个段落后面都会创建一个空格。

在标签中添加以下内容p：

p {

  /* All other properties remain the same */

  margin-bottom: 48px;
}
Enter fullscreen mode Exit fullscreen mode

浏览器中显示的结果：

蓝灰色背景上的文字

除了垂直韵律之外，响应式排版是另一种可以提高文本可读性的技巧。响应式排版要求我们在开发网站时改变思维方式和设计流程，因此我们将在“响应式网页设计”部分进行讨论。

你应该知道，我们目前只是浅尝辄止，网页排版远不止我们讨论的这些内容。我们将在最终项目中深入探讨网页排版。

接下来是CSS 动画和过渡效果。

文章来源：https://dev.to/ziizium/css-typography-1jnd
了解 Ractor 并搭建一个迷你...
构建零依赖的移动文档扫描仪：简介