標籤：

為何 Apple 在 iCloud.com 上使用微軟雅黑作為了中文字體？

12-19

CSS 傳送門：https://www.icloud.com/system/cloudos/14F47/en-us/stylesheet-packed.css
其中對應部分 font stack 的內容為：

body.zh-cn,body.zh-cn input,body.zh-cn textarea {
font-family: "Helvetica Neue", sans-serif, "Microsoft Yahei", "SimHei";
}
body.zh-tw,body.zh-tw input,body.zh-tw textarea {
font-family: "Helvetica Neue", sans-serif, "Microsoft Yahei", "MingLiU";
}
body.ja-jp,body.ja-jp input,body.ja-jp textarea {
font-family: "Helvetica Neue", sans-serif, "Meiryo UI", "MS PGothic";
}

不但 fallback 是不規範的（會導致不同瀏覽器有不同的顯示效果），而且字體的選擇很奇怪，即用了 OS X 特有的西文字體 Helvetica Neue，又用了 Windows 特有的中文字體微軟雅黑 + 中易黑體，繁體情況下也沒有使用相對應的微軟正黑體。且整個 font stack 也與 apple.com 官網的不相同（apple.com 並未指定中文字體），感覺非常奇怪。而且還使用了一個叫 「Helvetica Neue XP」 的非正式字體。

OS X 的默認簡中字體多年來都是華文黑體 / 黑體-簡，系統的字體回退機制也很健康，依賴回退就好了，不太需要在 CSS font-family 列表裡寫中文字體。（如果你驚訝的是為何沒指定冬青黑體，那麼請注意，iCloud 的網站介面理應與系統原生介面的默認字體一致。這種地方沒有利用非標準字體來美化的權利。）
對於 Windows，為了避免中易宋體，自然需要在 font-family 列表中指定微軟雅黑。
那麼，如果你不根據 UA 的平台來提供兩套 CSS，就必然會把給 Windows 用的微軟雅黑寫進來。（當然，應當考慮 OS X 用戶裝有 Office for Mac 於是系統帶有微軟雅黑的情況，但你看看這代碼的水平，你覺得這開發者考慮得了這麼多嗎？連繫統自帶字體都理不清。）
因此微軟雅黑出現在這裡一點都不奇怪。

真正奇怪的是，開發者是怎麼寫出——

font-family: "Helvetica Neue", sans-serif, "Microsoft Yahei", "SimHei";
font-family: "Helvetica Neue", sans-serif, "Microsoft Yahei", "MingLiU";
font-family: "Helvetica Neue", sans-serif, "Meiryo UI", "MS PGothic";

——這種奇怪代碼的。

  • Generic family `sans-serif` 放在中間？這是想要幹什麼？是想在回退到微軟雅黑之前先利用系統回退機制嗎？那麼 `Microsoft Yahei` 和 `Meiryo UI` 還怎麼生效？這是在 hack？
  • 簡中用微軟雅黑，沒問題啊。那繁中怎麼還是微軟雅黑？沒聽說過微軟正黑？
  • 日文點名用 Meiryo 的 UI 版，但微軟雅黑為什麼沒用 UI 版？（或許是在微軟雅黑 UI 版出來之前寫的 CSS 吧，Meiryo 的 UI 版確實比微軟雅黑早推出一些。）
  • 從日文和繁中的情況來看是要對 CJK 優先使用 Windows 自 Vista 開始提供的現代黑體，後備 Vista 之前的傳統宋體——那中易黑體（`SimHei`）是怎麼冒出來的？而且，那套傳統宋體有什麼必要明文指定嗎？
  • 連 `MS PGothic` 和 `MingLiU` 這種擰巴的大小寫都能寫對，把 `Microsoft YaHei` 寫成 `Microsoft Yahei` 又是什麼情況啊？水平堪憂。
所有語言都有這個問題的話，我覺得有這樣一種可能：面對這樣一個多語言的 UI，工程師可能選擇了用程序自動生成 `font-family` 列表……
其中英文版的設置被當作基準：

font-family: "Helvetica Neue",sans-serif;

給簡體中文配置的就是 `"Microsoft Yahei", "SimHei"`。生成的時候可能直接把其他語言的配置拼接了基準之後，沒有考慮 generic family 的問題。從而形成了這樣的結果：

body.zh-cn,
body.zh-cn input,
body.zh-cn textarea {
font-family:"Helvetica Neue",sans-serif,"Microsoft Yahei","SimHei";
}

模板可能是這樣的：

body.{{locale}},
body.{{locale}} input,
body.{{locale}} textarea {
font-family:{{baseFontFamily}},{{localeFontFamily}};
}

***
以上均為猜測，僅供參考。

Generic family 順序的錯誤，最有可能的是多語言模板生成流程中的 bug。

Helvetica Neue 經由 @font-face 定義，用 webfont 作 fallback，解決了非 Apple 平台上沒有本地字體的問題。例如：

@font-face {
font-family: "Helvetica Neue";
font-weight: 300;
src: local("Helvetica Neue Light"), local("HelveticaNeue-Light"), url("/fonts/HelveticaNeue-Light.ttf") format("truetype"), url("/fonts/HelveticaNeue-Light.woff") format("woff");
}

「微軟雅黑」「Meiryo」「MingLiU」「MS PGothic」等一系列非西文字體的選擇，是為 Windows 類平台用戶所作的特別設定。當然，選擇目前的實現方式，就意味著該開發團隊很可能是直接忽略了在 OS X 上安裝了這些正版字體的普通用戶（通常來源是 Office for Mac）。

（「Meiryo UI」單獨來看，似乎是頗巧妙一個選擇——避開了 Office for Mac 里的「Meiryo」。當然，後面緊接著出現了「MS PGothic」，這個推斷就無法自圓其說了。）

另外，「Helvetica Neue XP」可能是為了部分地繞開 Windows XP 中不夠理想的字體渲染效果。這個「XP」版本，升高了 SVG 版 webfont 實例的優先順序。SVG 通常以瀏覽器內核的抗鋸齒演算法來渲染。例如：

@font-face {
font-family: "Helvetica Neue XP";
font-weight: 300;
src: url("/fonts/HelveticaNeue-Light.svg#HelveticaNeue-Light") format("svg"), url("/fonts/HelveticaNeue-Light.woff") format("woff");
}

因為你在Windows下，他就給你投放Windows下瀏覽器的網頁，而且一般網站都是不指定字體的，直接寫san-serif，就是直接用系統設定的字體

用微軟雅黑只是因為要照顧Windows系統的顯示效果罷了…

不過，拼寫錯誤先不管，繁體版iCloud用微軟雅黑…

…這是沒意識到微軟雅黑在Windows上顯示繁體中文很髒亂的事實嗎？

（繁體版iCloud在PC上應該使用微軟正黑體才對）

推薦閱讀：

TAG:字體 | 中文字體 | 蘋果公司AppleInc | iCloud |