网页排版中控制间距的方法

如果您在 2006 年开发网站，那么您可能与像我这样的设计师合作过，他们会对字体在浏览器中的显示效果与在模型中的显示效果不完全相同而感到困扰。

然后您可能尝试向我解释跨浏览器兼容性的痛苦，以及不同的浏览器如何以不同的方式渲染字体。作为回应，我可能会向您发送一个包含内容的图像文件，以确保所有浏览器中的显示效果都相同。是的，我曾经是那种设计师。

从那时起，网络字体取得了长足的进步，我们现在有了调整字体在浏览器中渲染方式的工具。有些工具已经存在很长时间了。我记得当我发现 FitText.js 和 Lettering.js 时，我的内心充满了兴奋。

即使拥有所有这些花哨的工具，在当今仍然有很多需要调整字体的场景，以确保最佳的可读性。我们将在本文中介绍其中的一些场景，以及如何处理它们的方法。

使一个标题看起来恰到好处

我经常遇到这种情况，尤其是在设计中包含高度自定义的网络字体时，这些字体总体看起来很棒，但在某些情况下可能会显得奇怪。

以使用来自 Google 字体的 Abril Fatface 的以下标题为例

这是一个可爱的字体！但是，对于这个特定的标题，我有一些不喜欢的点，特别是几个字母之间的间距，这使得内容显得有点拥挤

这就是 **字距调整** 派上用场的地方！字距调整从字面上定义为字母之间的间距。所有字体文件，无论我们是否知道，都包含某种程度的字距调整，我们有 CSS font-kerning 属性来移除它

.no-kern-please {
  font-kerning: none;
}

<h1 class="no-kern-please">Rubber Baby Buggy Bumpers</h1>

这是一个细微的差异，但如果您的设计师（或您自己的眼睛）想要这样做，它可能会派上用场。

请注意，禁用字距调整并不总是符合您的最佳利益。正如 James Kolce 在下面的 评论 中指出的那样，设计良好的字体使用字距调整作为一种工具，并且这样做是有原因的。使用 CSS 移除字距调整，虽然在一次性情况下解决了某些特定的设计需求，但可能会对字体中字母之间的整体间距产生意想不到的后果，这可能会导致其他字母之间的间距不太好。

查看 CSS-Tricks 的 CodePen 作品 字距调整切换 (@css-tricks) 在 CodePen 上。

全面修复糟糕的字母间距

如果您曾经使用过每个字母之间的间距都太宽或太窄的网络字体，那么您完全知道这种情况有多痛苦。以下是用另一种名为 Dorsa 的漂亮的 Google 网络字体作为示例

这可能适合作为标题的显示字体，但你能想象将其用作段落来阅读吗？不行。

如果我们在每个字母之间添加几个像素，则 CSS letter-spacing 属性可以帮助对段落内容进行全面更改

.spaced-out {
  letter-spacing: 2px;
}

我不会说这仍然是段落文本的最佳字体，但有了额外的间距，它更容易阅读

查看 CSS-Tricks 的 CodePen 作品 zKkPqK (@css-tricks) 在 CodePen 上。

单词之间间距过小或过大

这是上一种情况的一个分支，只是间距问题出现在每个单词之间，而不是单个字符之间。

这就是 CSS word-spacing 属性非常棒且所有浏览器都普遍接受的地方。以下是用 Prompt 网络字体 编写的散文示例，该字体比许多其他字体略宽，如果针对此用例稍微调整一下，看起来会更好。

查看 Geoff Graham 的 CodePen 作品 GjJaaE (@geoffgraham) 在 CodePen 上。

行间距不规则

并非所有行高都被认为是相等的。例如，某些字体看起来比其他字体更大，即使它们具有相同的 font-size 值。

查看 CSS-Tricks 的 CodePen 作品 字体行高差异 (@css-tricks) 在 CodePen 上。

设置 font-size 会设置字体允许占据空间的边界框。如果我们将 font-size 设置为 20px，则会创建一个占用 20px 垂直空间的框，供每个字符占用。

某些字体将占用比其他字体更多的空间，这将使一种字体看起来比另一种字体更大，并且行之间的垂直空间也会或多或少。

我们可以使用 line-height 属性来帮助调整该垂直空间。一个不错的经验法则是 font-size * 1.5 = line-height（或使用无单位的 line-height: 1.5;）以提高可读性，但这将取决于所使用的字体以及它如何占据垂直空间。查看 熔化行距。

清晰度和可读性

并非所有字体在所有操作系统上都具有相同的生成效果。这是因为每个操作系统（无论是 Windows、Mac OS 还是其他任何操作系统）都会有不同的处理方式来确定显示字体的像素数量。

我们许多网页设计师都讨厌受制于系统如何解释我们的排版决策。

我们有 CSS 属性可用于提高字体在不同系统上的显示分辨率。此过程更正式地称为 **子像素渲染**，因为它指示浏览器尝试填充可能存在的缺失像素。

关于是否适合玩弄字体的子像素渲染，存在着大量的争议。尽管是在几年前写的，但 Dmitry Fadeyev 很好地总结了他反对这种做法的论点。

抗锯齿模式不是子像素渲染的“修复”——在大多数情况下，它是一种障碍。子像素渲染在技术上更优越，更清晰，更易读，因为它通过利用每个子像素，将其用于字体平滑的有效分辨率提高了三倍。抗锯齿在某些情况下有用，例如深色背景上的浅色文本，但它绝对不能替代子像素渲染，当然也不是“修复”。

但假设我们无论如何都想这样做。CSS 使我们可以使用 font-smooth 来填充操作系统可能遗漏的部分，从而对清晰度和可读性进行一定程度的控制。

font-smooth 值包括

• auto：允许浏览器决定填充字体像素的最佳方案。
• never：禁用系统自动平滑字体。这将以其自然状态显示字体，包括所有锯齿边缘。
• always：指示浏览器始终在它认为有必要的地方向字体添加像素。

注意： 在撰写本文档时，font-smooth 属性被认为是非官方属性，不建议在生产环境中使用。虽然 WebKit 和 Mozilla 有供应商前缀可以实现这种效果，但还没有标准实现。

鉴于上述说明，以下供应商前缀目前可用，并具有其自身的值

-webkit-font-smoothing

• none：在 WebKit 浏览器中禁用字体平滑。
• antialiased：在系统已提供的像素相同级别上平滑字体。
• subpixel-antialiased：在更微观的层面上平滑字体，以获得尽可能清晰的文本，尤其是在高分辨率屏幕上。

-moz-osx-font-smoothing

• auto：允许浏览器决定是否优化字体平滑。
• inherit：获取父元素的属性值。
• unset：与在 WebKit 前缀中指定 none 相同。
• grayscale：类似于 WebKit 前缀中的 antialiased 值。

哦，等等，您正在使用 SVG？！

SVG 对我们本文中介绍的技术有其自身的支持级别。我们有字距调整（不太可能产生太大影响）以及通常的嫌疑人字间距和词间距。有趣的是，我们还有一个 textLength 属性，可用于明确设置文本的渲染宽度，它会拉伸/压缩文本以适应。lengthAdjust 属性控制这是否应该仅发生在字符上，或者也发生在字形（如标点符号）上。

查看 CSS-Tricks 的 Pen SVG 文本间距 (@css-tricks) 在 CodePen 上。

总结

网页排版很难！是的，我们确实可以对字体在屏幕上的显示、渲染和定位方式进行大量控制。但能力越大，责任越大。至少您现在可以使用一些工具来回应那些纠结于浏览器中排版设计的精确度的网页设计师。