蘋果中國：

你好。我是一名設(shè)計(jì)師，有點(diǎn)強(qiáng)迫癥，來信是為蘋果中國的網(wǎng)站提一些建議。

看完蘋果發(fā)布會(huì)的直播后，我瀏覽了下英文網(wǎng)站的介紹，準(zhǔn)備睡覺。臨睡時(shí)看了一眼微博，發(fā)現(xiàn)一堆人都在驚呼蘋果中國的網(wǎng)站太丑了。于是我上了一下國內(nèi)網(wǎng)站，問題真的夸張。

之前還有兩篇很火的文，右戳感受強(qiáng)迫癥：
1、《給老羅的公開信！一個(gè)設(shè)計(jì)師關(guān)于錘子官網(wǎng)的吐槽》

2、《給李楠的公開信！一個(gè)設(shè)計(jì)師關(guān)于魅族官網(wǎng)的吐槽》

問題頁

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

除了蘋果中國那“除卻英文還不是中文”的神翻譯，最大的問題無非就是字體。涉及字體問題的頁面是“iPhone 介紹”全局的，我只截取了兩個(gè)比較典型的圖片。

以下是英文網(wǎng)站對照：

可以看到中文網(wǎng)站的問題是無論中文還是英文字體的設(shè)計(jì)都沒有堅(jiān)持英文網(wǎng)站字體的細(xì)度。而且因?yàn)檫@樣的字體選擇導(dǎo)致一些地方文字居然“撐破了”圖片的布局，更無所謂“構(gòu)圖”了。

于是我通過檢查器查看了相關(guān)字體的設(shè)置是這樣寫的：

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

看上去沒什么大問題，排在第一順位的是“PingHei”，但我發(fā)現(xiàn)網(wǎng)頁中調(diào)用的中文并不是“PingHei”。

PingHei 也叫“平黑”，是蘋果中國委托“常州華文”制作的一款具有標(biāo)志性意義的字體，也是蘋果“御用”黑體，通常會(huì)用在蘋果的網(wǎng)站或包裝設(shè)計(jì)當(dāng)中。因?yàn)檫@款字體的特殊性，它并沒有授權(quán)任何第三方機(jī)構(gòu)使用更沒有預(yù)裝到任何系統(tǒng)當(dāng)中。

因?yàn)橛脩綦娔X里沒有預(yù)裝，想要保證最終還能以平黑字體來顯示的話，則需要使用 Webfont （網(wǎng)頁字體）技術(shù)來告訴瀏覽器從網(wǎng)絡(luò)上的某個(gè)地址下載調(diào)用該字體。

我查看了蘋果中國網(wǎng)站是否在對應(yīng)的地方提供了地址，找到了下面的設(shè)置：

<link rel="stylesheet" target="_blank"  type="text/css" media=“all">

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

可以看到下面的一行是，網(wǎng)站對平黑字體網(wǎng)絡(luò)地址的聲明，而上面那行則是在個(gè)別地方有用到的蘋果英文御用字體“Myriad Set Pro”的聲明。

但我通過瀏覽器檢驗(yàn)：

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

卻沒有返回任何信息。

于是我在英文網(wǎng)站中找到了對應(yīng)的聲明地址是這個(gè)：

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

所以我懷疑蘋果中文網(wǎng)站應(yīng)該是因?yàn)榫W(wǎng)站更新時(shí)間準(zhǔn)備不足，而把字體的映射目錄弄錯(cuò)了，根據(jù)找到這個(gè)英文字體的地址，我推測了平黑的地址應(yīng)該為：

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

所以我用下面的兩段代碼替換了網(wǎng)頁中原有的聲明地址：

<link rel="stylesheet" target="_blank"  type="text/css" media=“all">

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

然后世界太平了。

▲ 這是之前

▲ 這是之后

▲ 這是之前

▲ 這是之后

希望蘋果中國能盡快修復(fù)這一 Bug，并且在下次上線前讓相關(guān)設(shè)計(jì)“檢查”一下。

同時(shí)想通過截圖報(bào)道蘋果中國網(wǎng)站的媒體或者有強(qiáng)迫癥的設(shè)計(jì)師，也可以先通過自己手動(dòng)修改的方式來獲取這樣的顯示效果。

“公開信”會(huì)是我文章寫作基本方式，本文是這個(gè)系列的第三篇文章，以后我還將繼續(xù)寫作類似文章，如果你希望，不妨掃描下方的二維碼關(guān)注我吧。

如果作者是甲方，不想改改改的設(shè)計(jì)師趕緊來學(xué)這些！

怕甲方山寨？就得這樣干！
《職場好經(jīng)驗(yàn)！如何應(yīng)對客戶想看效果圖的要求》

設(shè)計(jì)師必備技能之讀懂甲方：
《設(shè)計(jì)師必讀！如何從甲方抽象的概念里提煉LOGO創(chuàng)意》

教你跟設(shè)計(jì)師明確需求！
《奔走相告！甲方如何與設(shè)計(jì)師明確需求？》

作者：強(qiáng)迫癥設(shè)計(jì)詩
uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量77萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：