如翼视点
如翼曾经做过哪些事情?如翼的发展怎样
网站设计字体失真问题解决方案
发表时间:2019-07-10

在网站设计制作中很多人会遇到一个问题:设计图和实际出来的网站设计页面差别很大?

这要从网站设计各个职能的人说起了,平面设计师设计完后不管了,丢给前端工程师开发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,tahoma,Helvetica,Verdana,我们现在把这四个英文标注一下:Arial(苹果pc通用),tahoma(苹果好像没有PC有),Helvetica(苹果有PC没有),Verdana(苹果PC通用),这下知道英文也不这么容易选了吧?两个完全通用的,Arial、Verdana,差别主要在I,Arial的I没有上下两短横,Verdana有两短横。哪种好看见仁见智,建议Arial,真滴完全通用。而且要把英文字体写在前面!于是

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

表达的就是:如若页面英文就用Arial,中文就用雅黑或冬青。这就基本满足苹果pc了。手机呢?苹果手机和苹果电脑一样,安卓要再加个Droid Sans Fallback,如果考虑到小众的linx系统字体:WenQuanYi Miro Hei,方方面面就考虑清楚了!


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


慢着,再考虑下老系统,苹果老系统没有冬青,PC也没有微软雅黑的情况也是存在的(虽然很少了也要考虑),花点功夫把从前的苹果PC老字体加在新字体后面就更稳妥了。STHeiti是苹果老字体,华文黑体


接着完善:font-family:Arial,"Microsoft YaHei","Hiragino Sans GB",STHeiti,"Hiragino Sans GB","Droid Sans Fallback","WenQuanYi Micro Hei";


最后一步,加个这个:sans-serif。这个的意思是如果天有不测风云,前面都有问题,用系统默认的无修饰字体来补漏


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

别忘了都测试下。

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

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


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


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


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

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




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


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


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