分类：科技 标签：前端开发、排版设计、Apple、网页设计

每隔一段时间，我就会逛逛 Apple 官网。作为人机交互与视觉审美的行业标杆，Apple 的网页实现有太多值得开发者和设计师学习的地方。在深入研究其源码的过程中，我发现了不少令人惊叹的排版细节，今天就来和大家一同盘点。

一、 定制的 Web 字体：SF Pro SC

打开 Apple 简体中文官网，通过开发者工具可以发现，字体栈中的第一位是一款名为 SF Pro SC 的字体：

.typography-label:lang(zh-CN) {
  font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
}

这款字体并非系统内置，也没有公开下载资料，而是 Apple 为简体中文 Web 官网定制的非公开网络字体。它只包含汉字和部分标点符号，字型与苹方（PingFang SC）完全相同但经过了微调。

1. 中文字型更小

由于中文字体和西文字体对空间的使用方式不同，如果直接混排，汉字视觉上往往会比英文显得更大。为了视觉协调，SF Pro SC 基于苹方缩小了汉字字型。与之异曲同工的是，开源的思源宋体（Source Han Serif）则采用了将西文放大的策略，来达到同样平衡的中英混排效果。

2. 全角标点符号字符宽度更窄

Apple 简体中文官网的所有标点符号看起来都更接近半角宽度，但源码显示它并非使用真正的半角标点，而是在字体层面将全角标点符号的宽度调整为了字宽的 0.5 到 0.6 倍。这一改动能够有效避免大标题中由于标点过宽而导致的视觉空隙和不连贯感。

二、 严苛的换行控制

为了保证完美的视觉呈现，Apple 官网在换行控制上也做到了极致。

  • 避免孤行：通过给段落末尾的最后一个词包裹 nowrap 的 span，防止段落最后一行只剩下一个孤立的字，破坏版面平衡。
  • 保护易被折断的词语：在不同容器宽度（如 large、medium、small）下，网页会通过预设的 nowrap 精确保护可能被自动换行打断的词语，确保在任何屏幕尺寸下都具备最佳的阅读体验。
  • 响应式换行控制：通过显式插入类似 <br class="small"> 的控制符，实现短标题在小屏幕上自动分行、在大屏幕上保持一行的响应式排版。
  • 不换行空格：继承自英文官网的做法，所有类似 iPhone 18 Pro Max 的产品名均使用不换行空格连接，避免产品名在中间被强行截断。

三、 标题居中的视觉校正

中文全角标点的视觉中心通常偏向左下角。对于居中显示的带标点标题，这种特性会导致整体视觉重心偏左。

为了解决这个问题，Apple 官网在源码中采用了多种巧妙的校正方案：

  1. 对行末标点使用 position: absolute 进行精确定位。
  2. 为整个标题左侧增加额外的 0.5em 的 padding。
  3. 在标点后加入 margin-right 为负值的不可见 span，人为将标点挤压出计算宽度。

四、 中西文字符间的空距

中英文及数字混排时是否需要加空格，一直是设计界讨论的话题。W3C《中文排版需求》中便建议汉字与西文字母、数字间使用适量空白。

Apple 官网选择通过在文案中直接加入空格（即所谓的“盘古之白”）来解决这一问题。虽然偶尔会因为人工维护而漏掉一两个，但这种对细节的执着，让习惯了中英文紧紧贴在一起的普通网页显得黯然失色。

五、 极致的文案本地化

文案本地化不仅仅是翻译，更需要考虑文化与社会背景。

例如在某些特殊节点，为了规避特定日期可能带来的敏感风险，Apple 中国大陆官网对部分新品的发售日期文案进行了定制化处理（如将具体日期改写为“本月某日发售”），其精细化运营和风险规避的颗粒度可见一斑。

总结

世界上除了 Apple，还有几个品牌网站能把排版和本地化细节做到这种程度？答案或许屈指可数。

Apple 独一无二的品牌价值，正是由这一个个看似微不足道的细节凝聚而成的。从这些产品细节中，我们可以窥见背后团队严谨认真的职业态度。我们愿意为优质的产品支付一定的溢价，往往也正是为了买到那些由“怀揣敬畏之心的专业人士”所打磨出的极致体验。