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 如下，注�末尾的「碳�放。�进行了�护。这样就�会让最�一行�有「放。��为孤行。

<p ...>
  我们已空��近 Apple 2030 目标，这是我们基�科学制定的�伟�图，
  <br class="large">
  立志在全���碳足迹净零�放。以 2015 年为基准，
  <span class="underline">我们致力�将自己的温室气体�放��少 75%</span>
  ，�优先采用以自然为本且符�严格国际标准的解决方案，�抵消剩余的
  <span class="nowrap">碳�放。</span>
</p>

�护会被�行打断的�语

�看看教育页�的这段文案：

�创造一个更加公正平等的世界，教育至关��。为此，我们�手众多�作伙伴，� 100 多个国家�地区的求学者建立�系，为教育工作者们�供支�，创造��校外学习机会，并�动��平等�公正。当教育的大门能开得更大，�个人就能有更多途径��挥自身潜能。

这段�的 HTML 是下�这样的。除了末尾的「自身潜能。�是上��到的��孤行的规则，其他的「伙伴。�「教育。�「创造。�「�个人�「�挥�这几个�，你知�为什么�� nowrap �护�？

<p ...>
  �创造一个更加公正平等的世界
  <span class="s-p">，</span>
  <br class="small">
  教育至关��。为此，我们�手众多�作
  <span class="nowrap">伙伴，</span>
  � 100 多个国家�地区的求学者建立�系，为
  <span class="nowrap">教育</span>
  工作者们�供支�
  <span class="l-p m-rp-s-p">，</span>
  <br class="large">
  <span class="nowrap">创造</span>
  ��校外学习机会，并�动��平等�公正。当教育的大门能开得更大
  <span class="l-p m-rp-s-p">，</span>
  <br class="large">
  <span class="nowrap">�个人</span>
  就能有更多途径�
  <span class="nowrap">�挥</span>
  <span class="nowrap">自身潜能
    <span class="l-p">。</span>
  </span>
</p>

先�示一下：这段文字的文本对�方�是 center，容器有三�固定宽度：large 860px，medium 600px，small 330px。�网页在这里，你�以试试�索，看看能�找到答案：www.apple.com.cn/education-initiative/。

�晓答案：如�我们�制这一段纯文字，在��的 p 元素里新建一个纯 Text Node，对比三�容器宽度下的表�，就会��：

  • large 尺寸：「伙伴ã€�「创造ã€�两个è¯�被æ�¢è¡Œäº†ï¼›
  • medium 尺寸：「教育ã€�「å�‘挥ã€�被æ�¢è¡Œäº†ï¼›
  • small 尺寸：「伙伴ã€�「建立ã€�「æ¯�个人ã€�被æ�¢è¡Œäº†ã€‚（其中「伙伴ã€�被ä¿�护å��，「建立ã€�就被安æ�’到了ä¸�æ�¢è¡Œçš„ä½�置，因此无需ä¿�护）

所以在 Apple 制作这个网页的时候，考虑到了在任�一�容器宽度下，段��际渲染�的�版效�，精确地�护了�行末尾被自动�行打断的�语�

�应��行�制

在上�的 HTML 里，我们还看到类似 <br class="small"> 这样显��入的�行符，表示�有在 small �幕尺寸会在此处�行。在网站上的短标题文案，有很多地方都通过这�方�进行�应��行�制。

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

<h2 ...>
  想�级<span class="s-p">，</span>
  <br class="small">
  <span class="nowrap">时机正正好
    <span class="l-p">。</span>
  </span>
</h2>

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

想�级，
时机正正好。

英文产��中使用��行空格

这是继承自 Apple.com（英语官网）的�法，所有类似 iPhone 18 Pro Max 这样带空格的产��，��中都出�为 iPhone&nbsp;18&nbsp;Pro&nbsp;Max，��完整的产��被自动�行打断。

<p>
  iPhone&nbsp;Duo �了，首款�折� iPhone 全新�幕。上手一展开，就是迄今最薄 iPhone，
  <strong>��最大 iPhone 显示�直入眼帘，比 iPhone&nbsp;18&nbsp;Pro&nbsp;Max 足足大了 50%</strong>
  ；�一�的外�，显示�积高达 iPhone&nbsp;18&nbsp;Pro 的 90% 以上。iOS 也全��塑，�手带���新摆法�新角度，�动体验花样百出。
  <span class="nowrap">一切</span>
  精彩，都纳入�固精巧的机身中，轻�装进你�袋。这个 iPhone，���任何 iPhone。
</p>

标题居中视觉校正

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

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

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

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

  • 对行末标点用 position absolute çš„ span 进行包裹。比如 Apple Pay 页é�¢é¡¶éƒ¨çš„文案「支付，由 Apple 支招。ã€�末尾的å�¥å�·ã€‚值得注æ„�的是，在 small 情况下「支付，ã€�å��会æ�¢è¡Œï¼Œå› æ­¤è¿™é‡Œçš„逗å�·ç”¨äº† <span class="s-p">，</span> 包裹，å�ªæœ‰åœ¨ small 尺寸会å�šæ ¡æ­£ã€‚
  • 将整个标题左侧å¢�加é¢�外 0.5em çš„ padding。éš�ç§�页é�¢çš„标题「力ä¿�éš�ç§�安全，这很 Apple。ã€�å�¯èƒ½ç”±äº�这里å�šäº†ä¸€ä¸ªæ–‡æ¡ˆç”±å¯†ç �å� ä½�符ä¿�护ã€�éš�ç�€ scroll 慢慢æ�­ç¤ºçš„效æ�œï¼Œå› æ­¤æ²¡æ³•å†�定制行末标点的 position å±�性，所以采用了这个方案。
  • 在标点å��加入 margin-right 为 -0.6rem çš„ä¸�å�¯è§� span。iPhone Duo 页é�¢ä½¿ç”¨äº†è¿™ç§�方法，例如标题「新é�¢å­”加入 iPhone，全场折æœ�。ã€�两个标点å��都添加了 <span class="center-symbol"></span>。

中文�西文字符间的空�

中文�西文字符间的空�是�生常谈的问题。一般�说，中英文混�时，需�在中文和英文之间加入空�。中文�阿拉伯数字混�也��。

W3C《中文�版需求》6.3.3 横�的中�西文混��置中指出：

�则上，汉字�西文字��数字间使用�多�四分之一个汉字宽的字�或空白。但西文�数字出�在行首或行尾时，则无须加入空白。

大多数专业的�版软件，例如 Microsoft Word，都会自动加入这一空�。Apple 的�作系统内置的文字�版引�，也会自动加空�（你�以在 Apple 备忘录试试）。然而一直以� Web 平�并没有完全普�的加空�方�。直到近两年主��览器�普� text-autospace: normal。

Apple 官网使用的方�是加空格。Apple 内部应该是将其作为文案规范，所有文案涉�中英混�的部分，都加入了�外空格。（但�尔能���些临时�出的页��了一两个空格。由此��是人工处�的 😂）

自�注�到这个空格问题�，我看一般的网页里中英文挤在一起会觉得�常难�。如�你也一样，�以试试在�览器安装 pangu.js。

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

文案本地化

文案的本地化本身并�是一个技术上的问题，但这里我特别想���一个 case，我感觉 Apple 在这方��到了��的地步。

今年 9 月新�布的 iPhone 18 Pro�Apple Watch 等产�，�售日正好在 9 月 18 日。为了规�政治�感�险，Apple 中国大陆官网所有日期都�过了特别处�，将「9 月 18 日�售�改为「本月 18 日�售�。其他普通日期则没有处�。�传，�给�销商的宣��料中也进行了相应处�。�以看这个 9 月 16 日的网页存档。

总结：�业�度��牌价值

世界上除了 Apple 还有几个�牌网站能�到这�程度的�版和本地化细节呢？答案是 0 个。Apple 独一无二的�牌价值，正是�这些细节中��的。

�产�细节上，还能够看到产�背�的人的�业�度。我自己平常在使用�些平庸的产�时，�常觉得工作人员也太�认真了，太敷�糊弄了，甚至太�敬业了。�我而言，我愿�付一定的溢价购买更贵的产�，往往并�由�产�本身有多高的差异化价值，而是因为：我希望买到「怀�认真的�业�度的人��的产�。

> 关注少数派�红书，感�精彩数字生活 �

> �用�好用的正版软件，少数派为你呈� 🚀