優雅的使用跨平臺字體

+ 查看更多

 

不同瀏覽器和操作系統下，字體是不一樣的！如何使用字體才能兼顧所有的瀏覽器和用戶呢？

 

我們看一下幾個大公司的解決辦法

 

 

 

小米先使用Helvetica Neue這款字體以保證最新版本Mac用戶的最佳體驗，選擇了Arial作為Win下默認英文字體及Mac的替代英文字體；中文字體方面首選了微軟雅黑，然后選擇了冬青黑體及黑體-簡作為Mac上的替代方案；最后使用文泉驛微米黑兼顧了Linux系統。

 

題外話：Helvetica這款字體是一款傳奇字體，有一部專門的電影哦。也是唯一一個有電影的字體。喬幫主花了大價錢買斷了在iOS系統上的使用權；而蓋茨先生則自己做了另外一個字體Arial。

淘寶

 

鑒于淘寶網改版頻率較頻繁，你看的時候未必是這樣的，別噴哦。

 

 

其實從圖中明顯看出淘寶網的導航及內容有著大量的襯線字體，鑒于淘寶網站大部分字號比較小，顯示效果也還可以接受。代碼中可以看出淘寶使用了Tahoma、Arial作為首選英文字體，中文字體首選了冬青黑體，由于Win下沒有預裝該款字體，所以顯示出了后面的宋體（是的，宋體。。。淘寶么，你懂的），不用SimSun是因為 Firefox 的某些版本和 Opera 不支持 SimSun的寫法）

 

 

 

 

這樣可以最大限度的在IOS設備上讓您的用戶看到美觀的字體（iPHONE也是iOS設備哦）

 

如果您需要在起飛頁上使用這個字體組合，您僅僅需要在選擇字體的地方選擇這個字體就行。