前言
提供了一份针对开发者的网页排版快速指南，涵盖了字体选择、大小与间距调整、层级建立、颜色选择、文本换行处理以及浏览器怪癖等方面的实用 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）或相对于当前元素的字体大小来设置行高。我还没有找到使用绝对行高的良好用例（如果您知道一个，请给我发消息！），因此我建议使用相对值。
:root {
line-height: 1.5; /* 1.5 × font-size */
/*
It's also possible to use percents, but it's
not recommended due to poor inheritance behavior
*/
line-height: 150%;
}
浏览器默认的行高值在 1.1 到 1.2 之间，对于大段文本来说这个值太小了。您所使用的字体类型不同，理想值也会有所不同，但 1.5 是一个不错的起点。
顺便说一句，这个网站将 line-height 设置为 1.5。对于所选字体（Work Sans）来说，这个值效果很好，使得文本易于阅读，这对于长篇博客文章来说至关重要。
这里是一个使用 1.15 行高的文本示例。它仍然可以可读，尤其是对于较短的段落中。但它会使文本看起来非常紧凑，这对于长段落来说效果不好。默认行高会根据您的浏览器、使用的设备以及其他参数而有所不同，但通常在 1.1 到 1.2 之间，这还不够。
相比之下，这里有一个将 line-height 设置为 1.9 的例子。是不是有点太多了？文本行看起来彼此分离，从一行到下一行的连贯性更难把握，尤其是如果行很长的话。尽管在网页上我们有无限的画布，与为印刷媒体做排版的人不同，这感觉有点像是浪费空间......
此建议适用于正文文本，即字体大小约为 16px 的文本，略有浮动。对于较大的文本，如标题，不需要太多的行距。再次，这取决于您使用的字体以及您想要的外观，但通常 1.15 到 1.3 之间的行距效果良好。
极限线宽
过长的行很难阅读，不要使用过长的行。这通常在移动设备上不是问题，但对于使用宽屏幕的用户来说，如果你不限制行宽，浏览你的网站可能会成为非常痛苦的经历。
关于最佳行宽的研究并不像我们希望的那样清晰和确定，但一般认为行宽在 45 至 100 个字符之间是最佳的。例如，本网站的平均行宽为 90 个字符。
在 CSS 中没有直接设置行宽限制的方法，因此你需要限制文本容器的大小。
main {
max-width: 800px;
}
玩追踪
这个有点棘手。“跟踪” 是指字母之间的间距。如果你使用的是精心设计的字体，那么很可能已经内置了最佳的跟踪效果。如果你不确定是否需要调整跟踪，那么很可能不需要调整。但是有时候，你可能需要手动调整非常小的文本以使其更易读，或者调整非常大的文本以使其更紧凑。
跟踪是通过使用 letter-spacing 属性实现的，通常是在 em 元素中，这是一个与当前元素字体大小相对应的相对单位。
.small-tip {
letter-spacing: 0.02em;
}
建立层级结构
清晰的层级结构定义了页面上哪些内容是最重要的。它有助于用户更好地理解页面上内容的重要性顺序。当标题、副标题和正文文本具有清晰的层级结构时，它会给文档一个清晰的结构，帮助用户更快地浏览文档。
这通常通过字体大小来完成：标题会很大，正文会相对较小。但这不是一条硬性规则。同样，你也可以通过颜色和权重来构建层次结构。请查看 Emil Kowalski 的网站：
网站上的所有文本都采用相同的字体大小，而埃米尔则使用稍微粗体的字体作为标题，并使用稍微淡灰色的字体作为正文文本。这创建了一个清晰的层次结构，元素之间有足够的对比度。
选择颜色
对于正文部分，选择中性色是一个好主意，以免给读者的眼睛带来负担。通常，对于深色背景的页面，可以选择浅灰色作为正文颜色，而对于浅色背景的页面，则会选择较深的灰色作为文本颜色。传统的纯黑对白（反之亦然）在某些屏幕上可能看起来过于对比强烈。
界面元素，如按钮，往往色彩更丰富。确保它们上的文本具有足够的对比度很重要。对于小号和常规号大小的文本，对比度至少应为 4.5，对于大字号和粗体文本，至少应为 3:1。您可以在 Chrome 开发者工具中直接检查对比度，或者使用像这样的应用程序。
文本换行
在排版中，一个单词换行到下一行被称为孤儿，看起来有些凌乱，尤其是在标题中。幸好我们有一个 text-wrap: balance 属性，正好可以解决这个问题。
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
有了这个属性，浏览器将使用不同的算法来对多行文本进行换行处理 - 它会尽量使每行的长度相似，以避免出现孤行。这有助于使标题看起来更加整洁。不过，也有一个缺点。这个方法只适用于较小的文本块（Chrome 最多 6 行，Firefox 最多 10 行），因此其使用范围仅限于标题和像提示框或工具提示之类的短文本块。
Chrome 支持 text-wrap: pretty ，它能实现类似的效果，并适用于更大的文本块。然而，它目前尚未被 Firefox 和 Safari 支持。
浏览器怪癖
手机上的字体大小
移动浏览器（通常在 iOS 系统中是 Safari）在某些情况下可能会自动将字体大小放大（了解更多信息）。通常，这不是人们想要的，可以通过使用 text-size-adjust 属性来禁用它。
:root {
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
如果你需要在移动设备上调整字体大小，可以使用媒体查询来实现。
macOS 的字体平滑
CSS 允许您选择在 macOS 上如何渲染字体。您可以通过 -webkit-font-smoothing 和 -moz-osx-font-smoothing 属性来实现。默认情况下，浏览器会自动选择它认为最好的方式，通常是 subpixel-antialiased 。但是，您可以手动将其设置为 antialiased /grayscale ，这（主观上）会使文本看起来更好。
这是一个有些争议的话题。例如，这篇文章就描述了为什么不应该这样做。然而，同时，有 60% 的网站启用了抗锯齿功能，而且它也是默认的 Vite 项目模板的一部分。
在我的经验中，这种设置可以使渲染的文本看起来更好，更清晰，或者说更有锐利感。
:root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
我会根据具体情况决定是否使用字体平滑。如果你使用 Mac 电脑，可以检查一下你的网站是否在使用抗锯齿（也可以请使用 Mac 的朋友帮忙检查）。这个网站也设置了这个属性，因为它能产生显著的效果，尤其是对于用于标题的字体。
如果你是在 Mac 上阅读本文，就会看到这两个段落之间的差异。这个段落使用了 -webkit-font-smoothing: antialiased 标记，而另一个段落则使用了 auto 标记。对于其他浏览器和平台来说，这两个段落看起来是一样的。
如果你读到了这里，我相信你已经认同了字体设计的重要性。我希望这篇文章能帮助你更好地理解什么是好的字体设计。但很遗憾，它并不能帮助你做出伟大的字体设计，那需要大量的尝试和错误。所以，去进行一些字体排版吧！
关于本文
译者：@飘飘
作者：@Oleh
原文：https://sinja.io/blog/web-typography-quick-guide
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。
