苹果官网解析中英文排版与响应式细节

苹果官网的网页排版并不只依赖常规 CSS，字体选择、字符宽度和换行位置都经过细致调整。以简体中文页面为例，字体栈首位是 SF Pro SC，而不是系统自带的苹方。SF Pro SC 是苹果为中文网页定制的非公开网络字体，字形基于苹方并做了微调，通常由它显示汉字和全角标点，西文则回退到 SF Pro Display。

SF Pro SC 的主要变化有两点：一是缩小中文字形，使中文与英文混排时的视觉高度更协调；二是将全角标点压缩到约 0.5～0.6 个字宽。这样既保留了全角字符的规范性，又能避免大字号 slogan 中，标点造成过大的空隙。类似的视觉校正也出现在 Source Han Serif 中，只是后者通过放大西文来实现平衡。

在中英文混排示例中，若中文和西文分别使用未经调整的字体，汉字往往会显得比英文更高，英文则显得偏小。SF Pro SC 选择缩小汉字；Source Han Serif 则调整西文大小。相比直接改变字号，这种字体内部的处理能让混排效果更加稳定。

换行方面，页面会用 nowrap 包裹段落末尾的词语，避免最后一行只剩一个字形成“孤行”。对于居中排版的长文案，苹果还会针对不同容器宽度预先保护可能被拆开的词语。相关示例使用 860px、600px 和 330px 三种宽度，分别需要处理“伙伴”“创造”、“教育”“发挥”以及“每个人”等词，确保每种尺寸下的视觉效果都更完整。

网页还会利用带有 small、large 等标记的 br 元素控制响应式换行。例如“想升级，时机正正好。”在中大屏幕上保持一行，小屏幕则在逗号处拆成两行。英文产品名则使用不换行空格，避免“iPhone 18 Pro Max”这类名称被分割到不同的行中。

中文标题末尾的全角标点通常视觉重心偏向左下方，因此即使文本框技术上居中，带标点的标题也可能看起来向左偏移，字号越大越明显。苹果会让这类标题向右移动约 0.5em，以抵消标点造成的视觉偏差。

这类处理说明，网页排版不仅是设置字体大小、行高和对齐方式，还需要考虑字符自身的视觉重心、不同字体的混排关系，以及屏幕宽度变化后的具体换行结果。通过字体定制和细粒度的结构控制，页面在规范性与阅读体验之间取得了更稳定的平衡。