产品 少数派 · SkyWT · 1小时前 · AI 生成
Apple 官网排版细节鉴赏 作者通过扒 Apple 中国官网源码,拆解其排版工程化细节:为简体中文定制的非公开网络字体 SF Pro SC 缩小汉字并压缩全角标点宽度;用 nowrap span 逐尺寸规避孤行与断词;用 position absolute、padding、负 margin 三种方式校正标点居中;全站人工加中英空距。作者核心判断是这些细节体现职业态度、构成 Apple 溢价的一部分。适合前端、UI 与排版从业者细读。原文 ↗ 原文 ↗
核心观点
▍ Apple 官网的排版不是随手写写,而是把中文混排、换行、标点视觉居中这些细节逐像素工程化处理的产物。 ▍ 这些细节背后是职业态度,而 Apple 的品牌溢价部分正来自用户愿意为『认真做事的人做的产品』付费。 01 Apple 简体中文官网字体栈第一位是非公开的 SF Pro SC,只含汉字与部分全角标点,字型沿用苹方但做了微调,西文则 fallback 到 SF Pro Display。 02 SF Pro SC 相比苹方缩小了汉字字型、把全角标点宽度压到字宽的 0.5~0.6 倍,目的是让中英混排视觉一致、避免大字号标语在标点处出现过大空隙。 03 环境责任页面用 nowrap span 包裹末尾『碳排放。』防止孤行;教育页面则针对 large 860px / medium 600px / small 330px 三种容器宽度,精确保护『伙伴』『创造』『教育』『发挥』『每个人』等会被换行打断的词。 04 标题视觉居中至少用了三种实现:Apple Pay 页对行末标点用 position absolute 包裹、隐私页给整个标题左加 0.5em padding、iPhone Duo 页在标点后插入 margin-right 为 -0.6rem 的不可见 span。 05 中英混排空距按 W3C《中文排版需求》6.3.3 的原则人工加空格,偶有临时页面漏空格,反证这是人工执行的文案规范而非自动处理。 06 9 月 18 日发售的 iPhone 18 Pro 等产品,Apple 中国官网将日期改写为『本月 18 日发售』,被作者视为本地化细到规避政治敏感点的案例。 反方 / 局限
— 作者断言『能做到这种程度排版和本地化的品牌网站,答案是 0 个』,但全文只考察了 Apple 一家,没有横向对比其他品牌官网,这个绝对化结论缺乏对照证据。 — 文中提到的浏览器原生 text-autospace: normal 已能自动处理中英空距,Apple 仍依赖人工加空格,这种做法在工程可维护性上是否最优,作者未展开讨论。
概念锚点 SF Pro SC:一款不为公众存在的字体
Apple 简体中文官网字体栈第一位是 SF Pro SC,一款装不进 iOS/macOS、查不到官方资料的网络字体。它只含汉字和部分标点,字型基于苹方但做了两处微调:汉字缩小、全角标点宽度压到字宽的 0.5~0.6 倍。目的只有一个——让中文和 SF Pro 西文混排时视觉高度对齐、让「购买 Mac,好处多多」这类带标点的大标题不至于中间裂开一道缝。
▸ 2 条关联资料
▼
前置背景 盘古之白等 Web 层的一个原生方案
中英混排加空距,Word 靠排版引擎自动做,Web 长期只能手工敲空格或上 pangu.js 脚本。W3C《中文排版需求》2015 年就规定汉字与西文间留不多于四分之一个字宽,标准落地却拖了十年:2025 年 11 月 text-autospace 才进入 CSS Text Level 4 并在主流浏览器内核可用,默认值仍是 no-autospace,要开发者主动 opt-in。Apple 官网用的是最原始的人工加空格。
▸ 3 条关联资料
▼
功能拆解 nowrap span:为三种容器宽度预演换行
教育页那段文案的容器有 860/600/330px 三档,作者复制纯文字测试发现:「伙伴」「创造」在 large 断行,「教育」「发挥」在 medium 断行,「伙伴」「建立」「每个人」在 small 断行。Apple 的 HTML 里恰好用 nowrap span 精确包住了这几个词——也就是说,写页面时已经逐一预演了每种屏幕下每行的实际断点,再回头补保护。这不是通用 CSS 技巧,是逐句手工调出来的。
▸ 0 条关联资料
▼
设计取舍 标点居中校正的三种打法
全角标点主体沉在左下角,居中标题会视觉偏左,字号越大越明显,通常要右移约 0.5em 才正。Apple 官网至少用了三种补偿:Apple Pay 页面对行末句号套 position absolute 的 span 让它不占计算宽度;隐私页因有 scroll 揭示动画改用整体 padding-left 0.5em;iPhone Duo 页则在标点后塞 margin-right -0.6rem 的隐形 span。同一视觉目标三种实现,取决于该标题还背没背别的交互。
▸ 0 条关联资料
▼
平行视角 人工空格 vs 浏览器自动加距
Apple 的做法是把空格当文案规范、全站人工写进字符里,代价是偶尔漏一两个——作者原话「由此可见是人工处理的」。另一条路是把这件事交给渲染层:text-autospace: normal 由浏览器在绘制时生成不可复制的空白,不再污染文本内容,也避免「为什么这里有个空格却选不中」的困惑。前者可控但易漏、污染文案,后者干净但要等浏览器默认值与旧设备支持。
▸ 0 条关联资料
▼
未来推演 Web 排版能吃掉多少 DTP 的活
text-autospace 入 CSS 后,一个真问题浮出来:杂志级中西文混排是否不必再开 InDesign。已知变量是——Apple 代表在 The Type 播客中主张不用铅字时代的四分之一字宽,改用更窄空白,最终写进了默认值;默认值现在是 no-autospace,取决于网站是否主动启用。判断窗口在浏览器默认行为会不会翻转,以及标点悬挂、孤行控制这类规则何时标准化。
▸ 0 条关联资料
▼
延伸追问 这种手工精度能复制到别的团队吗
Apple 的做法依赖两件事:自有字体、可以逐句手改文案与 HTML。真正的追问是——当文案来自 CMS、多语言由翻译团队交付、页面由外包搭建时,「每个断点下的最后一词都用 nowrap 包好」这套流程怎么不塌?一个具体切入口:把 text-autospace 与 CSS 的 text-wrap: pretty / balance 放在同一张能力表上比对,看哪些环节能从人工校对降级为渲染期自动处理,哪些必须保留人工终审。
▸ 0 条关联资料
▼