【第3383期】面向开发者的网页排版快速指南

前言

提供了一份针对开发者的网页排版快速指南，涵盖了字体选择、大小与间距调整、层级建立、颜色选择、文本换行处理以及浏览器怪癖等方面的实用 CSS 技巧。今日前端早读课文章由 @飘飘翻译分享。

正文从这开始～～

作为网页开发者，你经常需要与文本打交道。如果你没有设计师的协助，你将经常决定文本的外观。即使你没有注意到这些选择，它们仍然存在。坦率地说，你们中的一些人做出了糟糕的选择。

在这份指南中，我们将探讨关键的排版设置，并学习如何使用 CSS 来控制文本的外观，使应用程序和网站上的文本默认看起来美观。本教程将对那些希望用 20% 的努力获得 80% 效果的开发人员有所帮助，无需深入研究排版。对于那些已经精通排版但尚未深入研究 Web 并希望快速了解 CSS 中与熟悉概念相对应功能的人来说，本教程可能非常有用。

本文不会讨论为您的项目选择特定字体类型或对其进行分类的问题。然而，它将讨论字体应采用何种格式。此外，本文不会涉及有关正确选择引号或何时使用连字符而不是破折号等相关话题。但如果您对这些内容感兴趣，我强烈推荐 Butterick 的《实用排版》一书。

相反，我们将专注于对文本进行一般的调整，使其美观且易于阅读，具体来说，就是需要哪些 CSS 规则。

最后，请记住，在设计中，规则可以带你走得远，但你不必害怕打破它们。今天我将分享一些规则和建议，但这并不意味着你不能以其他方式做事。如果你对自己的选择有信心 —— 请，打破规则！但如果不确定 —— 请遵循合理的默认设置。

选择字体

考虑使用本地字体

当谈到网页上的字体时，你可以选择从用户在设备上安装的字体中进行选择，或者加载自定义字体。对于没有太多排版需求的项目，我推荐使用内置字体。这并不意味着只能使用 Arial 和 Times New Roman！你可能会惊讶于简单的字体可以带你走多远。如果你想要更多的选择，可以查看现代字体堆栈。

【第3258期】Font2svg 特殊字体渲染方案

这段文字采用 font-family: system-ui 格式设置。根据您的系统不同，其显示效果可能会略有不同，但整体效果仍然不错。下面是一段用于填充的 “Lorem ipsum” 文字，可将该段落适当放大。

使用本地字体可以让网站加载速度更快，并完全消除未格式化文本闪烁的现象，但代价是可定制性降低。因此，虽然这并不适用于所有项目，但我还是建议你尝试一下。

外部字体

要加载自定义字体，您需要将字体上传到服务器上，并在样式表中添加一个 @font-face 规则。

有一些网站会为您提供字体服务，其中最受欢迎（也是免费的）的是 Google Fonts。如果您使用的是专有字体，那么字体供应商 / 铸造厂也可能为您提供服务。

【早阅】内置语法高亮显示的字体

外部字体格式

历史上，字体以不同的格式进行分发。最受欢迎的是 TrueType（.ttf）和 OpenType（.otf）格式，两者都可以作为外部字体使用，但除非你想支持古老的浏览器，否则这并没有多大意义。对于现代浏览器，WOFF2 是更好的选择。浏览器可以加载多种不同的字体格式，但我们只关心现代浏览器，所有这些浏览器都很好地与 WOFF2 格式兼容。

WOFF 字体在很多方面与 TrueType 和 OpenType 相似，但它们经过了压缩，因此字体开发者更愿意将字体以.woff 格式而不是.ttf 或.otf 格式授权用于网页应用程序中。你可以使用 Google 提供的 woff2 工具（或者如果你在 Mac 上，可以使用这个 brew 公式）将字体转换为 WOFF2 格式（反之亦然）。

建议使用可变字体

以前，如果你想要为文本使用不同的字体加粗（例如粗体），你必须加载多个字体文件（斜体也是如此）。

 /* This definition only loads font file with weight 400 and normal style */
 @font-face {
   font-family: 'Sonko';
   src: url('path/to/sonko-regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }

 /* If you want different weight or italic, you need to load multiple files here */

你可以想象，仅为了加载字体就管理 120 行 CSS 代码，这显然不是开发人员希望发生的事情。像 Google Font 这样的服务可以为您完成这项工作，但下载多个文件仍然会影响网站的加载时间。

幸运的是，我们有可变字体来帮助。可变字体可以通过改变其中一个轴的值来进行调整。这可能会改变字体的宽度、斜度、视觉大小等。但大多数时候，我们感兴趣的是 “粗细度”（ wght ）轴。它允许我们精细地设置字体的重量，例如为 582，而传统字体则只能在 500 和 600 之间选择。

【第3096期】当字体回退时发生了什么

除了对字体外观有更多控制外，可变字体在文件大小方面也更优。通常，可变字体文件比单一权重的文件大，但比两个单一权重文件的总大小小。因此，如果你的网站使用了不止一种字体权重（很可能你就是这样做的），请优先使用可变字体，以节省用户数百千字节的下载量，并加快您的网站加载速度。

 @font-face {
     font-family: 'MyFont';
     /* Acceptable weight range */
     font-weight: 100 900;
     font-style: normal;
     font-display: swap;
     src: url(/fonts/MyFont.woff2) format('woff2-variations');
 }

构造子集

有些字体支持多种书写系统，这意味着里面包含了大量字符。而且很可能你并不需要所有这些字符。如果你知道你的内容只会是英文，就没有必要让用户加载包含西里尔文、希腊文或阿拉伯文字符的部分字体。

为了优化此类情况的加载时间，您可以使用子集化。这是一种技术，即基于原始字体创建一个新的字体，但删除所有未使用的字符。这将使字体文件变小，这可能对加载时间产生重大影响。

大小与间距

字体大小

字体大小应该足够大，以便舒适地阅读。所有浏览器的默认字体大小为 16px，对于大多数情况来说已经足够了。如果你选择的字体在这个大小看起来太大或太小，可以通过百分比调整根元素的字体大小：

 :root {
     font-size: 112.5%; /* = 18px */
 }

字体的神妙之处在于，相同大小的不同字体看起来会非常不同，因此，如果你更改了字体，就需要相应地调整字体大小。

使用 rem 来设置其他元素的字体大小：

 .alert {
     font-size: 1.25rem; /* = 20px */
 }

 .tip {
     font-size: 0.875rem; /* = 14px */
 }

有些用户会在浏览器中更改默认字体大小（例如，视力受损的用户）。如果你将字体大小设置为绝对单位（例如，16px），浏览器会遵守这个规则，并在用户将默认字体大小设置为 18px 或 20px 的情况下，仍然以 16px 的大小渲染文本。我们应该尊重用户的选择，因此我们在根元素中使用百分比（基于默认字体大小）来设置字体大小，并在其他元素中使用 rem（基于根字体大小）来设置字体大小。

关于特定元素的字体大小，如标题，并没有固定的规则。例如，标题的字体大小。但是，作为一个不错的起点，我喜欢使用排版比例，它可以根据固定的比例来计算不同元素的字体大小。在 typescale.com 上，你可以尝试不同的比例，并查看它们在着陆页面或博客文章的上下文中看起来如何。

【第2299期】iconfont支持全新的彩色字体图标

行高或行距

这是字体排版中最容易实现的改进之一。设置合适的行高可能会对整体外观产生巨大的影响。如果文本排列得太紧密，就更难跟上行距，从而降低了可读性。如果行高太大，则会使从当前行切换到下一行更加困难，破坏了视觉节奏。

在 CSS 中，可以使用绝对单位（例如 24px）或相对于当前元素的字体大小来设置行高。我还没有找到使用绝对行高的良好用例（如果您知道一个，请给我发消息！），因此我建议使用相对值。