Apple 官网排版细节鉴赏
内容提要
Apple 官网在排版上体现极致用心：为简体中文定制非公开字体 SF Pro SC，缩小汉字、收窄全角标点以优化中英混排；用 nowrap 避免孤行和词语被换行打断，并做响应式换行控制；对末尾带标点的居中标题做视觉校正；中英文间人工加空格；甚至将“9 月 18 日”改为“本月 18 日”以规避敏感。这些细节反映其职业态度与品牌价值。
延伸解读
定制字体背后的混排逻辑
Apple 为简体中文官网定制的 SF Pro SC 并非简单替换字体，而是针对中英混排做了视觉校正：缩小汉字字型、收窄全角标点宽度。这源于中文字体与西文字体对空间的使用方式不同，直接混排时西文会显得偏小。文章通过对比 Source Han Serif 的处理方式（调大西文）说明，混排协调没有唯一解，但需要针对具体字体栈做调整。
换行控制不只是避免孤行
文章展示了 Apple 官网如何用 nowrap 包裹段落末尾词语避免孤行，更关键的是，在居中标题的三种固定容器宽度下，预先判断哪些词语会被自动换行打断，并逐一保护。这意味着排版考虑的是实际渲染结果，而非仅靠通用规则。响应式换行则通过带类名的 br 标签显式控制，让短标题在不同屏幕尺寸下保持合理断行。
标点视觉居中的工程化处理
中文全角标点主体偏左下，末尾带标点的居中标题会视觉偏左，字号越大越明显。Apple 官网至少用三种方式校正：用绝对定位包裹行末标点、给标题左侧加额外 padding、或在标点后插入负 margin 的不可见 span。这些方案说明，视觉居中不等于几何居中，需要针对具体场景选择实现手段，而非套用单一 CSS 规则。
人工细节与本地化边界
中英文间加空格在 Apple 官网是文案规范，但文章指出偶尔有页面漏掉一两个空格，可见是人工处理而非完全自动化。日期本地化案例中，将“9 月 18 日”改为“本月 18 日”以规避敏感，其他普通日期未做处理。这些细节反映的是对特定市场和语境的主动判断，其价值在于执行的一致性，但也提示读者：这类处理依赖人工审查，并非技术系统自动保证。
Q&A
Apple 简体中文官网用的 SF Pro SC 字体是什么？为什么需要专门定制？
SF Pro SC 是 Apple 为简体中文 Web 官网定制的一款非公开网络字体，只包含汉字和部分标点，字型与苹方（PingFang SC）相同但做了微调。定制目的是优化中英文混排：将汉字字型缩小，使汉字与西文（SF Pro Display）视觉大小更协调；同时收窄全角标点宽度至字宽的 0.5～0.6 倍，避免大字号标题中标点造成过大空隙。
Apple 官网如何避免段落出现孤行（最后一行只有一个字）？
Apple 官网用 nowrap 的 span 包裹段落最后一个词（如「碳排放。」），防止它被自动换行拆开，从而避免最后一行只剩一个字形成孤行。
Apple 官网怎样防止中英文混排时词语被换行打断？
Apple 会针对不同容器宽度（large 860px、medium 600px、small 330px）预先分析段落渲染效果，用 nowrap 的 span 精确保护在任一宽度下可能被换行打断的词语（如「伙伴」「教育」「创造」「每个人」「发挥」等）。此外，英文产品名中使用不换行空格（ ）连接，避免完整产品名被拆开。
Apple 官网如何实现响应式换行控制？
Apple 在 HTML 中显式插入带类名的 <br> 标签（如 <br class="small">），表示只在特定屏幕尺寸（如 small）换行。例如标题「想升级，时机正正好。」在中大屏幕显示为一行，在小屏幕则换行为两行。
Apple 官网对末尾带标点的居中标题做了哪些视觉校正？
由于中文全角标点视觉重心偏左下，居中标题末尾带标点时整体会显得偏左。Apple 采用至少三种校正方式：1）用 position: absolute 的 span 包裹行末标点，使其不占计算宽度；2）给整个标题左侧增加额外 0.5em 的 padding；3）在标点后加入 margin-right 为 -0.6rem 的不可见 span。
Apple 官网在中英文之间加空格是自动还是人工处理的？
Apple 官网采用人工加空格的方式，将中英文混排加空格作为内部文案规范，所有涉及中英混排的文案都加入额外空格。偶尔有临时页面漏掉一两个空格，说明是人工处理的。
Apple 中国大陆官网为什么把「9 月 18 日」改成「本月 18 日」？
为了规避政治敏感风险。今年 9 月新发布的 iPhone 18 Pro、Apple Watch 等产品发售日正好是 9 月 18 日，Apple 中国大陆官网将所有「9 月 18 日发售」改为「本月 18 日发售」，其他普通日期则没有处理。
