详细解析设计师对苹果官网的微吐槽

你好。我是一名设计师，有点强迫症，来信是为苹果中国的网站提一些建议。

看完苹果发布会的直播后，我浏览了下英文网站的介绍，准备睡觉。临睡时看了一眼微博，发现一堆人都在惊呼苹果中国的网站太丑了。于是我上了一下国内网站，问题真的夸张。

问题页

http://www.apple.com/cn/iphone-6/ 及其子页面

除了苹果中国那“除却英文还不是中文”的神翻译，最大的问题无非就是字体。涉及字体问题的页面是“iPhone 介绍”全局的，我只截取了两个比较典型的图片。

以下是英文网站对照：

可以看到中文网站的问题是无论中文还是英文字体的设计都没有坚持英文网站字体的细度。而且因为这样的字体选择导致一些地方文字居然“撑破了”图片的布局，更无所谓“构图”了。

于是我通过检查器查看了相关字体的设置是这样写的：

font-family:"PingHei","Helvetica Neue”,"Helvetica","Arial","Verdana","sans-serif";

看上去没什么大问题，排在第一顺位的是“PingHei”，但我发现网页中调用的中文并不是“PingHei”。

PingHei 也叫“平黑”，是苹果中国委托“常州华文”制作的一款具有标志性意义的字体，也是苹果“御用”黑体，通常会用在苹果的网站或包装设计当中。因为这款字体的特殊性，它并没有授权任何第三方机构使用更没有预装到任何系统当中。

因为用户电脑里没有预装，想要保证最终还能以平黑字体来显示的话，则需要使用 Webfont （网页字体）技术来告诉浏览器从网络上的某个地址下载调用该字体。

我查看了苹果中国网站是否在对应的地方提供了地址，找到了下面的设置：

<link rel="stylesheet" href="//uat2.iapps.apple.com/wss/fonts?family=Myriad+Set+Pro&amp;weights=100&amp;v=1" type="text/css" media=“all">

<link rel="stylesheet" href=“//uat2.iapps.apple.com/wss/fonts?family=PingHei&amp;weights=200&amp;v=1">

可以看到下面的一行是，网站对平黑字体网络地址的声明，而上面那行则是在个别地方有用到的苹果英文御用字体“Myriad Set Pro”的声明。

但我通过浏览器检验：

http://www.apple.com/uat2.iapps.apple.com/wss/fonts?family=Myriad+Set+Pro&weights=100&v=1

以及

http://www.apple.com/uat2.iapps.apple.com/wss/fonts?family=PingHei&weights=200&v=1

却没有返回任何信息。

于是我在英文网站中找到了对应的声明地址是这个：

http://www.apple.com/wss/fonts?family=Myriad+Set+Pro&v=1

所以我怀疑苹果中文网站应该是因为网站更新时间准备不足，而把字体的映射目录弄错了，根据找到这个英文字体的地址，我推测了平黑的地址应该为：

http://www.apple.com/wss/fonts?family=PingHei&weights=200&v=1

所以我用下面的两段代码替换了网页中原有的声明地址：

<link rel="stylesheet" href="/wss/fonts?family=Myriad+Set+Pro&amp;weights=100&amp;v=1" type="text/css" media=“all">

<link rel="stylesheet" href=“/wss/fonts?family=PingHei&amp;weights=200&amp;v=1">

然后世界太平了。

▲ 这是之前

▲ 这是之后

▲ 这是之前

 

▲ 这是之后

希望苹果中国能尽快修复这一 Bug，并且在下次上线前让相关设计“检查”一下。

同时想通过截图报道苹果中国网站的媒体或者有强迫症的设计师，也可以先通过自己手动修改的方式来获取这样的显示效果。