如翼视点
首页>如翼视点>网站中的字体设置--兼容苹果、pc、安卓系统的字体设置
网站中的字体设置--兼容苹果、pc、安卓系统的字体设置
发表时间:2019-07-10

在网站设计制作中很多人会遇到一个问题:设计图和实际出来的网站的页面字体差别很大?苹果、pc、安卓以及各个浏览器显示都很不一样?

这要从网站设计各个职能的人说起了,平面设计师设计完后不管了,丢给前端工程师开发h5代码。而前端设计师做完后又丢给程序开发写后台程序……最后修改的人很可能是前端设计师或者程序开发。不是贬低这两者(每个人注重点不同),他们对视觉上的差别往往注意不到,尤其字体差异。


写给网站平面视觉设计师的:

要想字体不失真,在网站字体设计的时候除了要转成图的文字,其他文本字体一律用无修饰文字,就是没有边边角角、没有花体、没有古怪变形的字体,说人话就是只用苹方黑体、微软雅黑中的一种(字体外形都差不多)做设计,排版小文字14-16pt,如果做手机版对应的是20-22pt,大字不限大小,顺眼就好。只用粗细两种,粗一般用bold,细一般用regular。一般不要用宋体和Times等字体,更不要用花体。于是平面设计师的字体任务就完成了,关键问题轮到前端设计师了。 


写给前端代码开发的:

不论视觉设计师用了思源黑体还是什么默认系统没有的字体,都要换掉。苹果系统认冬青、华文,PC系统认微软雅黑。现在的网站字体设计要兼顾很多系统、浏览器等,苹果、安卓、pc、linux默认的字体系统都不同,不会设置的话呈现出来的东西差异极大。这就要着重抓前端设计师CSS字体的设置了。网上这样的文章一大把,我们根据这段时间的经验,写一篇让大多数客户能明白、让平面设计师能留意的一篇文章,用反例一步步抽丝剥茧讲清原理,更简单和易懂。


前端CSS 设置字体的是font-family这个命令, font-family:后面就是字体名字。如下这样设置行吗?

font-family:"Microsoft YaHei"(后面只写个微软雅黑),

不行,因为网页运行时这个微软雅黑就要承担中英文、苹果PC、安卓等的全部字体功能。但苹果系统、安卓系统找不到这个微软雅黑字体蒙圈……在各个系统下显示,自然完全和设计图失真。

好了,那再加一个呢?由于网站运行原理是从第一个字体开始匹配系统,比如苹果系统在默认字体库里找不到微软雅黑会往下找,那我们就再再写一个适合苹果系统、显示又和雅黑类似的?就这么办吧:

font-family"Microsoft YaHei","Hiragino Sans GB";

加了后面这个冬青字体:苹果有pc没有,这样可以吗?pc匹配到雅黑就用它,苹果找到雅黑发现没有字体找到第二个:冬青。思维没错,就这样。

另一个问题就来了:中文字体集含有英文字体,能显示英文但不如专业英文字体好看。如下图所示:

排版的时候下图文字实在不如上图正规大气。那就要在样式里加一个专业英文字体了,兼容性最好的两种英文字体:Arial,Verdana,都是苹果pc通用。这两种字体差别主要在I,Arial的“I”没有上下两短横,Verdana的“I”有两短横。哪种好看见仁见智,建议Arial,真滴完全通用。另两种热门英文字体:tahoma(苹果好像没有PC有),Helvetica(苹果有PC没有)我也标注下,慎用。

由于英文字体集不含中文,所以要把英文字体写在前面!于是

font-family:Arial,"Microsoft YaHei","Hiragino Sans GB";

表达的就是:如若页面英文就用Arial,中文就用雅黑或冬青。这就基本满足苹果pc了。


手机呢?苹果手机和苹果电脑一样,安卓要再加个Droid Sans Fallback,如果考虑到小众的linux系统字体:WenQuanYi Miro Hei,方方面面就考虑清楚了!

进一步完善:font-family:Arial,"Microsoft YaHei","Hiragino Sans GB","Droid Sans Fallback","WenQuanYi Micro Hei";


慢着,再加个苹果流行的苹方字体,光PingFangSC不行,一定要加PingFangSC-Regular,或PingFangSC-Light,PingFangSC-Ultralight,PingFangSC-Thin,PingFangSC-Medium,PingFangSC-Semibold等属性(正常、细、超级细、瘦、中黑、粗黑)。
最后一步,加个这个:sans-serif。这个的意思是如果天有不测风云,前面都有问题,用系统默认的无修饰字体来补漏:


font-family:Arial,"Microsoft YaHei",PingFangSC-Regular,"Hiragino Sans GB","Droid Sans Fallback","WenQuanYi Micro Hei",sans-serif;

别忘了都测试下。

拿去用吧,保证你所看到的或看不到的市面上所有页面,都是最佳字体显示!

另外再推荐几个英文稍作改动的:


font-family:Verdana,"Microsoft YaHei",PingFangSC-Regular,"Hiragino Sans GB","Droid Sans Fallback","WenQuanYi Micro Hei",sans-serif;


font-family:tahoma,Arial,"Microsoft YaHei",PingFangSC-Regular,"Hiragino Sans GB","Droid Sans Fallback","WenQuanYi Micro Hei",sans-serif;


盛传的Helvetica等字体要加属性,很多人反映设置起来不容易控制效果。建议,如果没有十足把握,对这种有争议、视觉优势肉眼看不太出来的就先搁置吧。

最后为字体摆放位置做个总结:兼容性没这么好的但效果好的放前面,兼容性强的放后面,最后放一些liunx这种偏门的就万事大吉了。比如显示英文,英文字体好看但英文字体不兼有中文字体,放前面。中文字体兼有中英显示,虽然英文显示不好看,就要放英文后面。苹果新系统的苹方字体兼容性一定不如冬青,就要把苹方放冬青前面……等等


说个特殊情况哈,我们常常见到外文网站上有很多古怪英文字体,纯文字不是图片。其实是把这些古怪字体集放到了他们自己的服务器上。因为英文才26个字母,字体集不大,放到服务器上的一个字体集最多几M。但中文放不到服务器上,因为中文多少字?字体集太大。


只有这样,在前端设计师和平面设计师都按这样执行的话(两者缺一不可),网站上字体一定不会失真!


如翼设计原创,转贴请注明:如翼设计,更多内容请点击:如翼视点  

如翼设计设计能力:点击查看 

了解如翼设计服务内容:如翼设计做些什么