移动开发中的字距调整 — 字符间距的本质与调节

排版中的字距调整是什么

Tracking（字距调整，间距调整） — 是对文本块中所有字符间距的均匀调整。与字偶距不同，字偶距中每对字符根据字体的字偶距表接受单独的调整，而字距调整是以单一数值为整个范围设定。正字距增加间距（间距调整），负字距减少间距（紧凑）。

该术语起源于金属排版，其中字符间距由字母之间的物理距离调节。在数字排版中，字距调整应用于字偶距表之上：首先字体应用内置的字偶距对，然后系统向所有字符添加均匀的字距调整。最终间距 = 字偶距 + 字距调整，这在激进紧凑时需要考虑。

测量单位：字距调整可以用绝对单位（点数、像素、毫米）和相对单位（em、字体大小的百分比）设定。在移动开发中，字距调整通常以绝对值设定为点数（iOS）或 sp（Android），而在 Web 上则以 em 为相对值。相对单位更适合无障碍设计，因为它们会随用户改变字体大小而自动缩放。

字距调整与字偶距：根本区别

混淆 字距调整 和 字偶距 是初学设计师和开发人员最常见的错误之一。字偶距在微观层面工作：根据字符的几何形状调整特定字符对（AV、Te、To）之间的间距。字距调整在宏观层面工作：均匀地移动片段中所有字符，不考虑它们的形状。

视觉效果：在字偶距中，不同字符对之间的距离不同——A 和 V 之间比 A 和 I 之间小，因为字母形状相互补偿。在字距调整中，所有距离都相同——A 和 V、A 和 I、T 和 o 之间——处处是相同的偏移。这使得字距调整成为全局调节工具，而字偶距成为精细调节工具。

组合使用：在界面排版中，字距调整和字偶距一起应用。字体包含字偶距表以进行基础优化，开发人员为样式化或无障碍设计添加字距调整。字偶距表首先应用，然后在其上添加字距调整。在负字距（紧凑）时，字偶距对可能产生不必要的重叠——请检查有问题的组合。

正字距与负字距：何时应用

正字距（间距调整）增加字符间的距离。用于提高小号文字（10–13pt）的可读性，在标准间距下字符会视觉融合。也用于面向阅读困难患者的无障碍设计——增加的字符间距有助于识别字母。典型值：iOS 为 0.3–1pt，Web 为 0.02–0.05em。

负字距（紧凑）减少字符间的距离。用于标题（从 24pt 开始）和强调文本，紧凑的排版看起来紧凑且现代。大字号能很好承受紧凑，因为字符间距视觉上很大。典型值：从 -0.3 到 -1pt。限制：当字距调整小于 -1pt 时，字符可能会重叠，尤其是在具有突出元素的对中（fi、fj、TT）。

经验法则：每种字体大小都有允许的字距调整范围。字体越大，优化可读性所需的字距调整就越少。公式：最佳字距调整 ≈ font-weight * 0.01 – font-size * 0.001。对于粗体字（weight 700）16pt：700 * 0.01 – 16 * 0.001 = 6.84，经字体调整后约为 0.5pt 正字距。

不同类型文本的字距调整

正文（14–18pt）：不需要字距调整或最小正字距 0.1–0.3pt。专业字体已经包含正文的最佳间距。对正文字距调整的任何干预必须由设计或无障碍要求贸解释。标题（20–36pt）：根据字体和粗细允许的负字距从 -0.3 到 -0.8pt。全大写（ALL CAPS）：建议使用正字距 0.5–2pt，因为大写字母在全大写中没有额外间距会视觉融合。

字体特征：无宋体几何字体（Helvetica、Inter、SF Pro）比有宋体的古典字体（Times、Georgia、PT Serif）更能承受负字距。在古典字体中，宋体在字母之间创建了额外的视觉连接，紧凑会使文本不可读。对于古典字体，只建议使用正字距。

iOS 和 Android 上的字距调整实现

在 iOS 上，字距调整通过 NSAttributedString 中与字偶距相同的 .kern 属性实现，但有一个区别：字距调整需要指定一个与 nil 不同的数值。nil — 默认字偶距（来自字体表），0 — 关闭字偶距，其他任何数字 — 在字偶距表之上的字距调整。这意味着设置 .kern = 2 时，所有字符在内置字偶距对的基础上获得 +2pt 的字符间距。

let text = "Heading with tracking"
let attributedString = NSMutableAttributedString(string: text)

// 正字距 +0.8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// 带字距调整的 UILabel
label.attributedText = attributedString

SwiftUI 使用 .tracking() 修饰符，接受 CGFloat。与 UIKit 不同，SwiftUI 中的字距调整应用于修饰符内的整个文本，无法部分应用（陮非拆分为多个 Text 块）。SwiftUI 自动处理字偶距和字距调整的组合，将字距调整应用于字体的字偶距表之上。

Android 使用 TextView 中的 letterSpacing 属性，以 em（相对于字体大小的倍数）为单位设定。值 0 — 默认字距调整，0.05 — 增加 5% em，-0.02 — 减少。在 Android 中，letterSpacing 作为字距调整工作（所有字符统一），而字偶距表在 Minikin 渲染引擎层级自动应用。

// 在 XML 布局中
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// 在 Kotlin 以编程方式
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose 在 Android 中使用 TextStyle 中的 letterSpacing 参数，以 sp 为单位设定。例如，TextStyle(letterSpacing = 0.5.sp) 提供 0.5 sp 的字距调整。与 XML 方法不同，Compose 允许将 letterSpacing 与其他排版参数组合在单一的 TextStyle 对象中，简化了设计系统的创建。

Web 开发中的 letter-spacing 设置

在 Web 上，字距调整通过 CSS 属性 letter-spacing 实现，该属性接受任何长度单位或关键字 normal。值 normal 对应 0（无额外字符间距）。该属性可继承，支持负值，并可进行动画。根据 CSS 规范，letter-spacing 在字体的字偶距表之后应用。

/* Positive tracking for small text */
.caption {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Negative tracking for headings */
h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tracking for uppercase */
.uppercase-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

em 与 px：以 em 为单位的 letter-spacing 会随 font-size 变化而缩放，更适合无障碍设计。px 不会缩放，在浏览器放大文本时可能导致不一致。建议：始终使用 em 作为 letter-spacing 的单位。例外情况是字距调整需要无论字号大小始终保持固定时，例如在标志中。

letter-spacing 动画：该属性支持 CSS 过渡和动画，可创建流畅的文本出现效果。加载标题时从 letter-spacing: -0.05em 到 letter-spacing: 0.01em 的动画是现代界面中常见的技术。性能：letter-spacing 动画会引起重排版（重新计算布局），因为文本块的宽度会改变。在可能的情况下，对于高性能动画，请使用 transform 和 opacity 替代直接修改 letter-spacing。

移动界面中的无障碍设计与字距调整

字距调整直接影响视觉障碍和阅读困难患者的文本可读性。WCAG 2.2 指南 1.4.12（文本间距）要求，当字符间距、行间距和段落间距增加到特定值时，文本不应丟失内容。letter-spacing 必须能承受增加到 0.12em，不会被截断内容或元素重叠。

阅读困难：英国阅读困难协会的研究表明，将 letter-spacing 增加到 0.12em 可将阅读困难患者的阅读速度提高 10–15%。但这因人而异——一些用户更喜欢标准间距。iOS 和 Android 提供系统级别的无障碍设置来增加字符间距，应用程序必须尊重这些设置。

对开发人员的规范：不要使用固定宽度/高度，因为它们可能在 letter-spacing 增加时破损。在无障碍检查之前，避免对包含文本的容器使用 overflow: hidden。在所有屏幕上测试 letter-spacing 增加到 0.12em 的界面。如果设计破损——重新考虑布局，而不要忽略无障碍设计。

平台支持：如果使用 UIFont.preferredFont，当在辅助功能设置中开启更大文本功能时，iOS 会自动增加 letter-spacing。Android 通过 FontScale 提供类似选项。开发人员不应关闭这些设置。测试场景：在设备设置中开启最大文本大小，并检查字距调整是否会破坏界面布局。