优雅的使用跨平台字体

发布日期:2016-11-03
浏览次数:95
  
 
不同浏览器和操作系统下,字体是不一样的!如何使用字体才能兼顾所有的浏览器和用户呢?
 
我们看一下几个大公司的解决办法
 
小米(www.mi.com)
 
 font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif; 
 
小米先使用Helvetica Neue这款字体以保证最新版本Mac用户的最佳体验,选择了Arial作为Win下默认英文字体及Mac的替代英文字体;中文字体方面首选了微软雅黑,然后选择了冬青黑体黑体-简作为Mac上的替代方案;最后使用文泉驿微米黑兼顾了Linux系统。
 
题外话:Helvetica这款字体是一款传奇字体,有一部专门的电影哦。也是唯一一个有电影的字体。乔帮主花了大价钱买断了在iOS系统上的使用权;而盖茨先生则自己做了另外一个字体Arial。

淘宝
 
鉴于淘宝网改版频率较频繁,你看的时候未必是这样的,别喷哦。
 
 font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','宋体',sans-serif; 
 
其实从图中明显看出淘宝网的导航及内容有着大量的衬线字体,鉴于淘宝网站大部分字号比较小,显示效果也还可以接受。代码中可以看出淘宝使用了TahomaArial作为首选英文字体,中文字体首选了冬青黑体,由于Win下没有预装该款字体,所以显示出了后面的宋体(是的,宋体。。。淘宝么,你懂的),不用SimSun是因为 Firefox 的某些版本和 Opera 不支持 SimSun的写法)
 
 
最后,给出起飞页的推荐写法:
 
 font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 
 
这样可以最大限度的在IOS设备上让您的用户看到美观的字体(iPHONE也是iOS设备哦)
 
如果您需要在起飞页上使用这个字体组合,您仅仅需要在选择字体的地方选择这个字体就行。
 
 
 
 
 
 
 

登录后即可发表评论,立即登录.