Apple 官网排版细节鉴赏

Matrix 首页推荐 Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。 文章代表作者个人观点，少数派仅对标题和排版略作修改。 每隔一段时间，我就会逛逛 Apple 官网。Apple 作为人机交互的规则制定者，它的网页实现有太多值得我们学习和借鉴的地方。本文中，我梳理了一部分排版细节（并且在看源码的过程中又发现了一些新的细节 😂），与你分享。 定制的 Web 字体 Apple 在 2015 年推出了 SF 系列西文字体（一般使用 SF Pro）和苹方系列中文字体。然而打开 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 } SF Pro SC 是进入网页时会加载的一款网络字体。那就很奇怪了：既然是 Apple 的字体，居然没有在 iOS / macOS 内置；也找不到这款字体的官方公开资料。 事实上，这个字体是 Apple 为简体中文 Web 官网定制的一款非公开字体。下载打开可以发现，其中只包含汉字和部分标点符号，字型和 PingFang SC 完全相同，但进行了一些微调。按照字体栈的设置，西文会 fallback 到 SF Pro Display，因此网络正常的情况下，实际使用的字体通常是：汉字和全角标点使用 SF Pro SC，西文使用 SF Pro Display。 SF Pro SC 可以看成「专门为了和 SF Pro 混排而优化的简体中文字体」。下面是三种字体栈的显示效果对比： 可以看到，相较于 PingFang SC，这款 SF Pro SC 主要有两点调整： 中文字型更小，全角标点符号字符宽度更窄。 为什么要做这种调整呢？ 中文字型更小 仔细观察上方截图的第二行 SF Pro Display 和 PingFang SC 的渲染效果，会感觉汉字视觉上比英文大一些。特别是「Mac」的左侧，「买」的高度明显高于 M 字母的高度。这是由于中文和西文字体对空间的使用方式并不相同，单独设计时并不会保证对齐，如果直接混排，视觉上西文就是会看起来更小。 因此 SF Pro SC 基于 PingFang SC 缩小了汉字字型，针对中英文混排进行视觉校正。 我的网站 skywt.cn 使用的 思源宋体 （Source Han Serif，别名 Noto Serif SC），其实也有类似的处理。这个字体包含的西文部分源于 Source Serif 系列，但西文字符被调整得更大，使得其与中文混排时视觉观感更一致。可以看下图的中英混排文案「换成 iPhone 怎么样」的对比，以 64px 作为基准： 第一行是全部使用 Source Han Serif，中英混排最为协调。 如果将英文部分换成 Source Serif 4，即第三行的样式，会发现英文看起来明显比中文小。注意此时 font size 设置并没有任何改变，都是 64px。 如果要修正这个视觉偏差，需要调大其中的「iPhone」一词至大约 77px，即第二行的样式。此时「iPhone」一词看起来又会偏重。Source Serif 4 字体提供了无极的 weight 和 optical size 调节，需要进行较为复杂的调节才能调整出和第一行 Source Han Serif 相近的效果。 总结来说，为了让中英文混排更加协调，SF Pro SC 的做法是将汉字调小，Source Han Serif 则将西文调大。 全角标点符号字符宽度更窄 Apple 简体中文官网所有的标点符号，看起来都是半角宽度，但查看源码会发现网站并没有使用真正的半角标点符号，而是在字体层面调整全角标点宽度。 SF Pro SC 的全角标点符号宽度是字宽的 0.5～0.6 倍。 我认为这个设计主要目的是： 保障包含标点的 slogan 阅读体验。 Apple 大量使用了含有标点的 slogan，比如上面的「在 Apple 购买 Mac，好处多多。」如果使用全宽的全角标点符号，由于标题字体较大，会导致「购买 Mac」和「好处多多」之间视觉空隙过大，产生不连贯感；而为了视觉统一和字符标准，直接在字体层面对这一展现进行了调整。 更多关于 SF Pro SC 这款字体的探索，可以参考这篇文章： SF Pro SC 是什么字体？ 换行控制 避免孤行 所谓孤行，指的是某个段落末尾最后一个字正好成为新的一行，这样会让这个段落在视觉上看起来不平衡。在传统的杂志排版规范中都会提到避免孤行。Apple 网站的处理方式是：段落最后一个词用 nowrap 的 span 包裹保护。 例如 环境责任 页面的这段文案： 我们已空前接近 Apple 2030 目标，这是我们基于科学制定的宏伟蓝图，立志在全球实现碳足迹净零排放。以 2015 年为基准，我们致力于将自己的温室气体排放量减少 75%，再优先采用以自然为本且符合严格国际标准的解决方案，来抵消剩余的碳排放。 HTML 如下，注意末尾的「碳排放。」进行了保护。这样就不会让最后一行只有「放。」成为孤行。

我们已空前接近 Apple 2030 目标，这是我们基于科学制定的宏伟蓝图，
立志在全球实现碳足迹净零排放。以 2015 年为基准， 我们致力于将自己的温室气体排放量减少 75% ，再优先采用以自然为本且符合严格国际标准的解决方案，来抵消剩余的 碳排放。

保护会被换行打断的词语 来看看 教育 页面的这段文案： 要创造一个更加公正平等的世界，教育至关重要。为此，我们携手众多合作伙伴，与 100 多个国家及地区的求学者建立联系，为教育工作者们提供支持，创造各种校外学习机会，并推动种族平等与公正。当教育的大门能开得更大，每个人就能有更多途径来发挥自身潜能。 这段话的 HTML 是下面这样的。除了末尾的「自身潜能。」是上面提到的避免孤行的规则，其他的「伙伴。」「教育。」「创造。」「每个人」「发挥」这几个词，你知道为什么要做 nowrap 保护吗？

要创造一个更加公正平等的世界 ，
教育至关重要。为此，我们携手众多合作 伙伴， 与 100 多个国家及地区的求学者建立联系，为 教育 工作者们提供支持 ，