塾饭

标题: Apple 官网排版细节鉴赏 [打印本页]

作者: TechShare 时间: 昨天 09:30
标题: Apple 官网排版细节鉴赏
资讯：
Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。

文章代表作者个人观点，少数派仅对标题和排版略作修改。

https://www.xyfan.com/data/attac ... a3bb04e0b005e78.png

每隔一段时间，我就会逛逛 Apple 官网。Apple 作为人机交互的规则制定者，它的网页实现有太多值得我们学习和借鉴的地方。本文中，我梳理了一部分排版细节（并且在看源码的过程中又发现了一些新的细节 😂），与你分享。

SF Pro SC 是进入网页时会加载的一款网络字体。那就很奇怪了：既然是 Apple 的字体，居然没有在 iOS / macOS 内置；也找不到这款字体的官方公开资料。

https://www.xyfan.com/data/attac ... 47f2e424766fb75.png

事实上，这个字体是 Apple 为简体中文 Web 官网定制的一款非公开字体。下载打开可以发现，其中只包含汉字和部分标点符号，字型和 PingFang SC 完全相同，但进行了一些微调。按照字体栈的设置，西文会 fallback 到 SF Pro Display，因此网络正常的情况下，实际使用的字体通常是：汉字和全角标点使用 SF Pro SC，西文使用 SF Pro Display。

SF Pro SC 可以看成「专门为了和 SF Pro 混排而优化的简体中文字体」。下面是三种字体栈的显示效果对比：

https://www.xyfan.com/data/attac ... ae89dfcfcdad6f1.png

仔细观察上方截图的第二行 SF Pro Display 和 PingFang SC 的渲染效果，会感觉汉字视觉上比英文大一些。特别是「Mac」的左侧，「买」的高度明显高于 M 字母的高度。这是由于中文和西文字体对空间的使用方式并不相同，单独设计时并不会保证对齐，如果直接混排，视觉上西文就是会看起来更小。

因此 SF Pro SC 基于 PingFang SC 缩小了汉字字型，针对中英文混排进行视觉校正。

https://www.xyfan.com/data/attac ... efdfe885e084d55.png

总结来说，为了让中英文混排更加协调，SF Pro SC 的做法是将汉字调小，Source Han Serif 则将西文调大。

所谓孤行，指的是某个段落末尾最后一个字正好成为新的一行，这样会让这个段落在视觉上看起来不平衡。在传统的杂志排版规范中都会提到避免孤行。Apple 网站的处理方式是：段落最后一个词用 nowrap 的 span 包裹保护。

https://www.xyfan.com/data/attac ... e41f0adda49fefb.png

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

HTML 如下，注意末尾的「碳排放。」进行了保护。这样就不会让最后一行只有「放。」成为孤行。

https://www.xyfan.com/data/attac ... 8c5e1073f97c08b.png

要创造一个更加公正平等的世界，教育至关重要。为此，我们携手众多合作伙伴，与 100 多个国家及地区的求学者建立联系，为教育工作者们提供支持，创造各种校外学习机会，并推动种族平等与公正。当教育的大门能开得更大，每个人就能有更多途径来发挥自身潜能。

这段话的 HTML 是下面这样的。除了末尾的「自身潜能。」是上面提到的避免孤行的规则，其他的「伙伴。」「教育。」「创造。」「每个人」「发挥」这几个词，你知道为什么要做 nowrap 保护吗？

https://www.xyfan.com/data/attac ... 3c9c014f351db36.png

所以在 Apple 制作这个网页的时候，考虑到了在任意一种容器宽度下，段落实际渲染后的排版效果，精确地保护了每行末尾被自动换行打断的词语！

例如 MacBook Pro 底部的「想升级，时机正正好。」标题：

https://www.xyfan.com/data/attac ... 5a388a351d539e8.jpg

因此，在中大尺寸屏幕就会是完整的一行，在小屏幕就会换行显示为两行：

中文的全角标点符号，主体居于左下角，其他部分都是空白。即使 Apple 的 SF Pro SC 字体的全角标点更窄，和汉字相比，标点视觉中心依然集中于下方或左下角。

https://www.xyfan.com/data/attac ... 18fbfc39b1a118.jpeg

对于末尾带标点符号的标题，居中显示时，这会导致视觉偏左，如下图。标题字号越大，这种偏差越明显，特别是上方有居中图标等参照物的情况下。

这类标题需要右移大约 0.5em 才能视觉居中，如下图：

https://www.xyfan.com/data/attac ... e2e4a339d6b304b.png

我在 Apple 官网找到至少三种方式实现这种校正，基本思路是：让末尾标点不占用计算宽度，或者人为设置整个标题右移。

中文与西文字符间的空距是老生常谈的问题。一般来说，中英文混排时，需要在中文和英文之间加入空距。中文与阿拉伯数字混排也同理。

Apple 官网使用的方式是加空格。Apple 内部应该是将其作为文案规范，所有文案涉及中英混排的部分，都加入了额外空格。（但偶尔能发现某些临时推出的页面漏了一两个空格。由此可见是人工处理的 😂）

漢學家稱這個空白字元為「盤古之白」，因為它劈開了全形字和半形字之間的混沌。另有研究顯示，打字的時候不喜歡在中文和英文之間加空格的人，感情路都走得很辛苦，有七成的比例會在 34 歲的時候跟自己不愛的人結婚，而其餘三成的人最後只能把遺產留給自己的貓。畢竟愛情跟書寫都需要適時地留白。

文案的本地化本身并不是一个技术上的问题，但这里我特别想要提及一个 case，我感觉 Apple 在这方面做到了变态的地步。

Designer & Engineer. AI native builder.

点击下方按钮可复制链接
（转载少数派）

欢迎光临塾饭 (https://www.xyfan.com/)