大家好，好久不见，忙于事务，很久没更新教程了。今天我们聊一个简单且不简单的问题：网页设计中的字体！

网页设计其实是要适配多个浏览器的，比如一个网站做好了，准备上线了，这个时候开始做测试了。很多人都注重功能和页面呈现是否正常，却很少测试人员会注意字体的变化。

设计师：字体变了你发现了吗？

程序员：没有啊，不都是这个字体吗？你看。

设计师：不对啊，我设计稿里是黑体，你这怎么是宋体了啊！

程序员：有区别吗？呵呵～

这是我碰到过的对话内容，网页里呈现的字体和设计稿的不一致，很多初级设计，不知道那里出了问题，很容易就被开发给忽悠过去，不更改问题。今天看了这个，你可以怼他了，理直气壮的怼～哈哈哈哈

一般苹果系统自带浏览器的字体是平方，windows系统的主流浏览器都是宋体，有个别浏览器是微软雅黑。正常情况，测试认为这不会是个BUG

但是在设计师层面来说，这是个问题呢～。

先看下几种字体的对比：（不好意思，用了自己的名字做栗子哈哈哈...)

同样是24PX的字体，但是在视觉上有很大的不同。

平方自然是完美的！微软雅黑也是windows里很美好的字体，算是比较贴合平方的了。宋体其实是一款非常优雅的字体，可是随着网络的发展和设备的创新，设计者发现宋体不能适应小屏设备显示器了。

手机屏幕的出现就注定了宋体是只能出现在PC端的小众字体了，这种衬线字体，笔画粗细变化过大，在手机屏幕显示就显得很弱，看不清，不好辨别，其实他们的大小是一致的，但是宋体看起来就显得弱，薄。

所以网页设计的时候，使用什么字体是很重要的，艺术类的网站，可以考虑宋体，互联网类的，电商之类的，还是黑体比较合适，字体清晰，易于辨别。切记黑体不要随意加粗～会难看到死。

那会有人说了，那就设置字体不就好了，对啊！在前端开发的时候制定好规范，说明字体要求，就可以了。嗯，这是对的，但是你却忽视了一个问题，浏览器可以设置字体（这个就是每个人的习惯问题）

我们抛开设置字体的情况，就是初始状态，网页的字体在任何显示器都应该是统一的（把系统分开来说）

如何做到在一个系统里的浏览器显示的网页字体一致呢？

其实很简单：在页面设置的时候，设置一个状态，就是浏览器默认首选是哪种字体、其次是哪种字体。

这样有什么好处呢？

好处就是浏览器会首选你设置的默认字体，不管那个浏览器都会统一字体样式。而不是显示浏览器自己的字体。

字号

网页设计里字体的大小基本是：12 、14、16、18、20、24PX再大就属于装饰性的了，不是内容型的了。

文章内容基本是14-16，标题可以是16加粗、18、20、这些是有别于界面设计里的字体大小的。不可同日而语！

10号字体切记不可用，因为浏览器不兼容！前端开发也不会给你写10号字体的哈哈哈

艺术字

网页里不缺乏一些艺术字体，很炫酷好看。其实它们都是以图片或是背景的形式存在的。例如：

今天就说到这，有机会再聊一下字体再网页设计中的排版。