7.9
深览指数
产品少数派·SkyWT··AI 生成

Apple 官网排版细节鉴赏

作者通过扒 Apple 中国官网源码,拆解其排版工程化细节:为简体中文定制的非公开网络字体 SF Pro SC 缩小汉字并压缩全角标点宽度;用 nowrap span 逐尺寸规避孤行与断词;用 position absolute、padding、负 margin 三种方式校正标点居中;全站人工加中英空距。作者核心判断是这些细节体现职业态度、构成 Apple 溢价的一部分。适合前端、UI 与排版从业者细读。原文 ↗

核心观点
  • ▍Apple 官网的排版不是随手写写,而是把中文混排、换行、标点视觉居中这些细节逐像素工程化处理的产物。
  • ▍这些细节背后是职业态度,而 Apple 的品牌溢价部分正来自用户愿意为『认真做事的人做的产品』付费。
  1. 01Apple 简体中文官网字体栈第一位是非公开的 SF Pro SC,只含汉字与部分全角标点,字型沿用苹方但做了微调,西文则 fallback 到 SF Pro Display。
  2. 02SF Pro SC 相比苹方缩小了汉字字型、把全角标点宽度压到字宽的 0.5~0.6 倍,目的是让中英混排视觉一致、避免大字号标语在标点处出现过大空隙。
  3. 03环境责任页面用 nowrap span 包裹末尾『碳排放。』防止孤行;教育页面则针对 large 860px / medium 600px / small 330px 三种容器宽度,精确保护『伙伴』『创造』『教育』『发挥』『每个人』等会被换行打断的词。
  4. 04标题视觉居中至少用了三种实现:Apple Pay 页对行末标点用 position absolute 包裹、隐私页给整个标题左加 0.5em padding、iPhone Duo 页在标点后插入 margin-right 为 -0.6rem 的不可见 span。
  5. 05中英混排空距按 W3C《中文排版需求》6.3.3 的原则人工加空格,偶有临时页面漏空格,反证这是人工执行的文案规范而非自动处理。
  6. 069 月 18 日发售的 iPhone 18 Pro 等产品,Apple 中国官网将日期改写为『本月 18 日发售』,被作者视为本地化细到规避政治敏感点的案例。
反方 / 局限
  • — 作者断言『能做到这种程度排版和本地化的品牌网站,答案是 0 个』,但全文只考察了 Apple 一家,没有横向对比其他品牌官网,这个绝对化结论缺乏对照证据。
  • — 文中提到的浏览器原生 text-autospace: normal 已能自动处理中英空距,Apple 仍依赖人工加空格,这种做法在工程可维护性上是否最优,作者未展开讨论。
18 分钟 · 7 卡片 · 5 资料
读原文 →

概念锚点

前置背景

功能拆解

设计取舍

平行视角

未来推演

延伸追问