考虑到 文字是任何界面的基础，因此为网站的排版提供一流的处理方式是有意义的。设置字体时，细节确实很重要。多大？多小？行高多少？字母间距多少？所有这些选择都会影响文本的可读性，并且在不同的字体之间差异很大。由此可见，越重视文本的可读性，就能越有效地传达信息。
在这篇文章中，我将深入探讨一个看似简单的排版主题——有效使用字母间距——以及它与网页排版的关系。
一些历史
字母间距或字符间距是指一行文本中所有字母之间的区域。操纵此空间旨在增加或减少一行或一段文本的视觉密度。
在印刷工作中，排版师也将其称为跟踪。它不要与字距调整混淆，后者指的是操纵两个单独字母之间的空间。字距调整通常不在网络上使用。
历史上，操纵字母间距是一种在版面设计报纸时经常使用的技巧。快速截止日期的压力意味着记者没有时间重写句子以更好地适应分配给他们的页面上的物理空间。为了解决这个问题，设计师会在字母之间插入间距——最初是手工插入，后来是数字插入——以便一行文字更好地填充分配的空间。
在网络上，可用空间可能无限，字母间距通常用于其其他主要的历史用例：为内容（如标题和标题、摘录和横幅）创建独特的审美效果。
虽然 网络上的精细排版控制 只是最近才发展起来，但执行 字母间距的能力从 CSS1 就存在。自然地，此属性的名称称为letter-spacing。
letter-spacing 接受各种类型的长度作为值。与它的物理对应物不同，它可以设置为负测量值，这会将字母靠得更近而不是更远。在设置印刷字体时，没有哪位称职的排版师会为了达到这种效果而从铅字中切掉块状物。但是，当您的字母是虚拟的时，您可以随心所欲地处理它们！
偷羊
在研究字母间距的历史时，您可能会遇到字体设计师 Frederic Goudy 的一句名言。——嗯——干净的版本是，“任何会对小写字母进行字母间距的人都会偷羊。”从本质上讲，Goudy 认为在不知道规则的情况下操纵字体是不好的。
有些人对此话不加思考，并发誓永远不会对包含任何小写文本的内容应用字母间距。虽然我绝不敢自称拥有与 Goudy 一样高超的技能或渊博的排版知识，但我还是要提醒大家注意 教条主义的弊端。
在某些情况下，将 字母间距应用于大段文本 将是有利的，只要它是为了优化可读性。例如，明智地将字母间距应用于 法律文本或小字 在读者浏览小型、密集、充满专业术语的内容时提供了急需的帮助。
就像练习良好的排版一样，编写优秀的 CSS 就是要注意细节——即使是一个单独的属性也可能包含大量隐藏的复杂性。了解技术的历史、功能和局限性，可以创建健壮、美观的解决方案，无论设备或能力如何，每个人都可以使用。
如果您想操纵网站上文本的字母间距，以下是一些关于如何做好并避免犯错的指南。
使用字母间距，而不是空格字符
在印刷中，在一行金属或活字中每个字母之间创建空格在历史上涉及在每个字母之间插入小块金属。但是，在网络上，您希望避免在每个键入的字母之间添加任何额外的 字形——例如 空格字符。如果您需要实现字母间距字体的视觉效果，请使用letter-spacing属性。这可能看起来很明显，但您会感到惊讶！
可维护性
如果使用了空格字符，则将来样式更改将更难以进行和维护。每种字体都有不同的宽度。很难预测或控制潜在的重新设计可能如何表现，尤其是在为具有大量不同内容的大型网站做出排版决策时。
如果您发现这是多个站点作者之间出现的一种行为，则应通过更新站点样式以反映此所需的审美来调查对其进行编码。这可能还需要与设计师讨论以更新样式指南和其他相关的品牌文档。
可访问性
如果字母由空格字符分隔，则某些屏幕阅读器会逐个读取每个字母，而不是整个单词。在这种情况下，为了创作的便利性而牺牲了可用性——浏览变得费力，人们不必要地被排除在使用您的网站之外。
想象一下， 您的视力不如现在。您在网络上的体验将非常类似于此
此问题不会触发自动可访问性检查，因此手动审核非常重要。就像句号后有两个空格一样，这种做法 是一种坏习惯，因此通常可以根据每个作者的基础发现进一步的违规行为。
非无单位值
letter-spacing 属性使用非无单位值来确定字母之间的间距。虽然 CSS 提供了一系列可供选择的单位，但有一些值需要避免
像素和其他绝对单位
就像手动插入空格以创建字母间距效果一样， 绝对单位（如像素）也难以预测当您不可避免地更新或更改任何字体样式或字体时会发生什么。与 相对单位 不同，这些静态单位在缩放时只会按比例缩放自身。一些旧版浏览器根本不会缩放它们。
在可维护性方面，静态单位也存在问题。对于一种字体，以像素为单位定义的效果可能很好，但对于另一种字体可能看起来并不好，因为不同的字体对其字形的宽度有不同的定义。如果您更改品牌的字体，则更新整个网站中精确测量的像素值将成为一项繁重的任务。
相对单位
相对单位的大小是通过相对于其他事物的大小来衡量的。例如，视口单位根据浏览器的宽度和高度来调整事物的大小——使用width: 5vw;设置样式的事物将具有浏览器宽度的 5% 的宽度（诚然，这是一个过度简化，这篇文章不是关于浏览器 UI 的细微差别的）。
对于英语和其他罗曼语系语言的字母间距，您需要使用em单位。
历史上，em 的大小是通过大写字母 M 的宽度（通常是字母表中最宽的字符）来衡量的，或者后来通过字体集中所有金属活字的高度来衡量的。在网页排版中，em 的大小可能基于一系列因素。
- 浏览器的默认字体大小（通常为 16px，但并非总是如此）。
- 用户指定的默认字体大小。
- 页面根元素上声明的字体大小（通常应用于
<body>标签）。 - 包含父元素上声明的字体大小。
- 样式中声明的字体大小。
- 浏览器缩放或扩展程序、操作系统偏好设置等特殊操作模式设置的字体大小。
除了向过去几代伟大的排版师致敬而带来的极客自豪感外，基于 em 的字间距始终与您声明的字体大小相关。这确保了所有内容始终能够正确且成比例地缩放。
rem，em 的年轻兄弟，以类似的方式运作。主要区别在于它们始终与根字体大小成比例（但仍然受浏览器缩放等特殊操作模式的影响）。
虽然使用rem进行字间距可能看起来很有吸引力，但我希望您能考虑渐进增强。您担心无法处理像素缩放的那些旧版浏览器可能也不支持rem。为了避免将来不得不处理不可避免的错误修复，一开始就使用em吧。
可访问性
掌握了可以优雅且弹性地调整字间距的知识后，还有一件事需要考虑：虽然字符过于紧凑显然难以阅读，但字间距过大的文本也会对可读性产生负面影响。
当字符之间的距离过大时，单词看起来就像单个字母。这可能会影响您的大量受众，包括有阅读障碍的人、语言学习者、视力障碍者等等。
与之前讨论的手动调整间距问题一样，此问题也可能不会被自动辅助功能检查检测到。不幸的是，没有神奇的公式来确定字符之间的间距过大到什么程度。由于不同的字体具有不同的字符宽度，因此在调整字间距时，务必花点时间检查并确定您的文本行是否既易读又易于理解。
使用text-transform
通常会看到全部大写字母的排版也使用了字间距。这样做是为了减轻整个页面的视觉“重量”，以便在阅读时眼睛不会不必要地分散注意力。
text-transform属性控制文本如何大写。这其中有一个微妙之处，即转换发生在渲染后的页面上，而不是源HTML中。因此，作者编写的文本字符串“The quick brown fox jumped over the lazy dog.”并使用text-transform: uppercase;进行样式设置，将渲染为“The quick brown fox jumped over the lazy dog.”。
选择合适的字间距与通过text-transform设置的文本相匹配，更像是一门艺术而不是科学，并且有一些隐藏的复杂性和不良行为需要了解。
可访问性
如果您在这里发现了一种模式，那就是您希望让CSS做它被设计用来做的事情：控制页面的外观而不影响HTML标记的底层语义。
如果您使用一系列手动输入的大写字母来创建效果，它将与使用空格键输入的空格以相同的方式处理——一些旧版屏幕阅读器会逐个读取每个字母。虽然这对于大多数首字母缩略词来说是可以的，但仅出于美观目的而大写的文本应通过样式进行转换。
同样，如果这种手动操作在您的网站作者中是一种模式，请研究将行为编码并替换为text-transform指令。您不仅是在为用户提供帮助，而且还在通过为他们节省一些麻烦和精力来成为一个好同事。
阅读理解是另一个需要考虑的因素。我们通过预测单词中字母的模式来阅读书面语言，然后回过头来验证。大面积全部大写的文本使得难以预测这些模式，从而降低了阅读速度和理解能力。
用户体验
在争分夺秒地完成项目时，微交互经常被忽视和低估，但它们在创造良好的、令人难忘的体验方面发挥着重要作用。text-transform的正确使用就是一种这样的微交互。
复制文本时，某些浏览器会尊重源代码中的内容，并忽略应用于它的任何文本转换。如果我们在 Firefox 或 Edge 中复制上面的“The quick brown fox”示例并粘贴它，我们会看到文本不是全部大写。
有些人可能会争辩说，样式化的呈现优先，但我认为不支持这种保留作者意图的浏览器是不正确的。如果您没有时间、资源、自主权或技术知识将此文本转换回其作者编写的格式，那么重新格式化将变得不平凡。在必须手动将此内容迁移到其他系统的情况下，它会不必要地引入错误的可能性。
感觉很酷？
还在坚持吗？这是您的奖励！现在我们已经正确地设置了字间距，让我们深入了解一些有趣的内容。
特殊单位
不，我们不是在谈论海豹突击队第六分队。如果您在 MDN 页面上花了一些时间来讨论可用的各种单位，您可能会注意到“字体相关的长度”小节中有一些有趣的度量单位。
ex，表示字体的x 高度。cap，表示字体的大写字母的高度。ch，表示字体零 (0) 字符的宽度。
如果您想真正加深对排版的理解，您可以使用
ex用于设置使用小写字母的字间距（稍后详细介绍）。cap用于设置转换为全部大写的字间距。ch用于设置等宽字体的字间距。
虽然这些单位的支持情况各不相同，但CSS 的 @supports允许我们自信地编写这些声明，同时为不兼容的浏览器提供后备方案。
.heading-primary {
color: #4a4a4a;
font-family: "ff-tisa-web-pro", "Tisa Pro", "FF Tisa Pro", "Georgia", serif;
font-size: 2em;
letter-spacing: 0.25em; /* Fallback if the `cap` unit isn't supported */
line-height: 1.2;
text-transform: uppercase;
}
@supports (letter-spacing: 0.25cap) {
.heading-primary {
letter-spacing: 0.25cap; /* Quarter the font's capital letter height */
}
}OpenType 功能
排版历史充满了针对特定用例的特殊处理，在这些用例中，默认呈现可能不足以有效地传达含义。一些处理是为了帮助增强视觉色调，而另一些则更实用——有助于轻松理解文本。
OpenType 延续了这一历史，并允许精通排版的专业人员使用这些特殊处理，前提是字体支持它们。对于数字排版，大多数销售专业字体的公司都会告诉您哪些功能可用。
Adobe Typekit 将可用功能隐藏在 Kit 编辑器中“OpenType 功能”复选框旁边的信息图标中。Thisarmy 的 Google OpenType 功能预览允许您浏览 Google 字体的库并切换可用功能。
不幸的是，许多其他免费字体托管服务都没有提供此功能。为了确定您选择的字体是否具有支持这些功能所需的特定字符，您可以在浏览器中进行测试。如果您在计算机上安装了副本，您还可以查看字体的字符映射（Windows 的字符映射，Mac 的字体册）。
如果启用并且键入了特定的字符组合，大多数 OpenType 功能将自动替换。多亏了一些聪明的工程师，这种替换不会影响搜索、翻译或粘贴/更改为不支持该功能的字体。
如果您的字体确实支持 OpenType 功能，以下是在设置字间距时需要考虑的一些事项。
连字
普通和可选连字是将两个通常并排出现的字符组合在一起的特殊字符。历史上，它们用于解决常见的字距调整问题，以及节省铅字以供其他用途。
关于字间距，您需要确保已禁用连字，以防止发生以下情况。
#专业提示：当使用字间距 != 0 时，通过font-feature-settings禁用连字。否则会出现这种情况。 pic.twitter.com/lU52wIfYx5
— Lea Verou (@LeaVerou) 2014 年 7 月 6 日
您可能也在考虑使用带样式的span标签来模拟连字，并将两个字符靠得更近。这是一个巧妙的想法，但在屏幕阅读器读取时可能会出现问题。
连笔字和替换字：标题、上下文、样式、历史
这些特殊功能通常会调整字体的呈现方式，以调整语气，或使特殊装饰和常见重复的字符更具区分度。这些功能不太常见，但大多数专业字体至少包含一种处理方式。
与连字类似，字母间距类型的呈现方式也会影响这些功能。在将样式推送到线上之前，最好测试一下它在各种内容上的显示效果——lorem ipsum 可能无法捕捉到它。
小型大写字母
许多文字处理程序允许您创建伪造的小型大写字母，就像它们允许您创建伪造粗体和斜体样式一样。这些伪造样式的问题在于它们是劣质的仿制品。真正的粗体、斜体和小写大写样式都是专门设计为使用与字体其余部分相同的比例和度量的。伪造样式是一种一刀切的解决方案，其外观就像奶牛从楼梯上摔下来一样糟糕。
虽然 CSS 确实有一个font-variant: small-caps;声明，但除非字体包含实际的 OpenType 小型大写字母字形，否则真的不应该使用它。与文字处理程序伪造的小型大写字母一样，CSS 创建的伪造小型大写字母是真实事物的扭曲复印件。
如果您的字体确实支持小型大写字母，那么设计它的排版师很可能已将其理想的字母间距烘焙到他们的字形中。因此，您可能不需要手动设置字母间距，而可以依靠他们的良好判断。
区分大小写的形式
此功能呈现旨在与任何全大写设置的内容一起显示良好的字形。由于诸如井号（#）和@符号之类的存在，我们正在享受非字母数字字符与常规内容一起放置的文艺复兴。如果您的字体支持它们，并且您在某个地方使用了字母间距全大写样式，我建议您包含它们！
CSS 自定义属性、预处理器和实用程序类
成熟网站的目标之一是拥有易于理解和维护的代码库。CSS 自定义属性和 CSS 预处理器（如Sass或PostCSS）提供了诸如变量之类的功能，允许开发人员对在源代码中重复出现的测量值等内容进行编码。
对于字母间距，变量可以成为确保开发人员不必估计其值的好方法。包含预定义且易于理解的测量值（如$tracking-tight / $tracking-slight / $tracking-loose）的系统可以让参与网站工作的人员不必浪费时间考虑什么最符合设计。设计师应该明智地使用开发人员为这些商定的测量值使用的相同命名约定。
实用程序类（一种 CSS 方法，“应用单个规则或非常简单、通用的模式”）也可以利用这种测量形式化。通过采用设计系统中这些预定义的声明组合并将其转换为单用途类，您可以为网站上元素的描述方式添加大量灵活性和模块化。
<section class="c-card">
<h3 class="u-heading-secondary u-tracking-slight u-all-caps">
Our services
</h3>
…
</section>如果您的组织拥有一个大型网站，并且该网站包含许多不同的组件以及不同级别的网站源代码访问权限，则此功能尤其方便。只有访问发布环境（包括 HTML/Markdown 视图）权限的作者，如果他们意识到这些样式并允许他们所需的灵活性，则更有可能保持在既定样式内。
结论
排版是每个人阅读体验的一部分，但大多数人对此并不太在意。通过更好地了解其历史、优势和劣势，我们能够为每个人打造清晰有效的阅读体验。
感谢这篇精彩的文章！但我对开头“可维护性”部分的示例感到困惑：它显示了细体和粗体文本不同的“1em”度量，但字体大小以及因此的“em”单位对于两者都是相同的。我错过了什么，还是这是一个错误？
如果语言和示例令人困惑，我表示歉意。CodePen 试图演示 em 如何根据使用的字体具有不同的计算宽度，因为它从字体本身派生其宽度。
此示例使用了两种不同的字体，但我将对其进行更新以使其更清晰。
在文章的后面，您正确地指出 em 与“M”字母宽度无关，并且基于字体大小（根据您链接到的关于字体相对单位的 MDN 页面，它根据定义等于字体大小）。因此，这些段落的 em 值完全相同，因为它们的字体大小相同。但是，不同字体中的字母确实具有不同的实际宽度（在您的示例中，“m”的宽度对于细体字体约为 0.68em，对于粗体字体约为 1.03em）。
精彩的文章——我潜意识里已经了解了很多内容，但看到它以正式的方式写出来真是太好了——我也学到了很多东西。