在网站设计制作中很多人会遇到一个问题：设计图和实际出来的网站的页面字体差别很大？苹果、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。但中文放不到服务器上，因为中文多少字？字体集太大。

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

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

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

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