网页设计常用的好看的字体
网页设计常用的好看的字体
如何构建一个合理的font-family,并推荐几个使用的字体组合给大家。
仍旧按照CSS标准的解释方式来写 font-family,但是在 font-size 上做些手脚,只用 12px, 14px, 16px 等稳扎稳打的字体大小。这样做最大的好处是能优先用最合适的字体显示英文字符。至于中文字符,XP的宋体也好,Vista的雅黑也好,OS的新宋体也好,在上面几个字体大小下显示的都不算难看。何况中文字体的选择范围本来就比较小,无外乎也就是那几个系统默认字体,因此自然也凑合。个人比较倾向使用这种方案。
Tahoma是我本人比较喜欢的一种非衬线字体。首先几乎所有的系统都默认安装了这个字体,所以不会存在兼容性问题,其次,这个字体也比较均衡,显示段落也不错。
Verdana 16px Verdana 14px Verdana 12px
说老实话,Verdana太宽了,不适合中英文混排。很多时候Verdana的一个字母都要比同样size的中文字符宽了。国外设计师喜欢用Verdana, 很多时候是因为Verdana 11px以下的小字效果的确十分理想,但是晋内很多设计师想也不想就照搬过来,并用在12px 乃至14px的布局上,导致本来就局促的空间更显紧张,所以不推荐作为font-family 打头阵的字体。
如果要使用Verdana字体的话,就一定要考虑它和一般系统default的sans-serif字体之间的大小差距。不论和Helvetica 或者Arial 比起来,Verdana都大得多了。不过好在几乎所有的系统也都会默认安装这个字体……
Trebuchet MS 16px Trebuchet MS 14px Trebuchet MS 12px
Trebuchet MS 是个很多人都会忽视的字体。其实我个人也比较欣赏这个字体的。与其使用Verdana, 还不如用这个线条更圆润的的字体来替代。对各种操作系统也有很好的支持。
缺点是和Verdana一样,因为过宽,而不适合用在中英文混排。也要注意和default sans-serif font 宽度差距的问题。
因为考虑到有些Linux 系统可能不会安装这个字体,所以如果要用在一个font-family的开头话,可以使用Verdana 做后续字体。
Arial 16px Arial 14px Arial 12px
Windows 操作系统的默认sans-serif 字体。没啥好说的,永远都不会用到的默认字体。
Helvetica 16px Helvetica 14px Helvetica 12px
为啥同样是默认字体,Helvetica 就这么典雅呢? 哪怕就是用在font-family的开头也是能独挡一面的啦。
另外,这里有个 Helvetica 和 Arial 打架的flash游戏~ 像超级玛利一样踩 Arial 字符就可以了。顺便没有 Helvetica 字体的人可以看一下两个字体的具体区别~ 茶~
Georgia 16px Georgia 14px Georgia 12px
我最喜欢用的 serif 字体。不仅很适合做正文,也适合做标题。尤其是意大利体的 Georgia Italic 更是魅力难挡。缺点仍旧是不适宜和汉字混排,因为Georgia的衬线哪怕对于宋体来说也太重了,所以看上去硬邦邦的……
Times New Roman 16px Times New Roman 14px Times New Roman 12px
Windows 的默认serif 字体。没啥好说的,西文字体的元老了。很多字体,比如大家都熟悉的Courier New都是从Times New Roman派生出来的。
不过现在印刷业都很少用这个字体了,更多的是在用它的后代——Times Europa 和 Times Europa Office。
在具体的网页字体应用上,要注意同样字号的Times New Roman比普通字体小的多,所以一定要考虑进字体大小的变化
Courier New 16px Courier New 14px Courier New 12px
常用的等宽字体之一。其实等宽字体的选择比较小啦,所以基本上要兼容所有系统,也就只能选这个字体了。
不过还好,等宽字体通常都是在写代码的时候有用,所以只要等宽就没什么大问题。类似于 Lucida Sans Typewriter, Lucida Console, Monaco 之类的字体也都很好用。
- 综上所述,总结几套实用而简单的font-family
font-family: Tahoma, Helvetica, Arial, sans-serif;
Tahoma 系的中性字体。推荐使用在13px以上的环境。
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
Verdana 系的宽扁字体。推荐在11px以下环境使用。
font-family: Geogia, Times New Roman, Times, serif;
衬线字体的不二之选。
font-family: Lucida Console, Monaco, Courier New, mono, monospace;
一系列等宽字体。写代码很好用。另外,如果觉得Lucida Console太宽的话,可以换成比较窄的Lucida Sans Typewriter。话说老赵blog上的代码块使用的就是Lucida Sans Typewriter 哟~
至于“宋体”这样的字体名称,因为中间没有空白字符,因此完全没有必要加引号。但是考虑到并非左右的操作系统都有汉字支持,并且并非所有的程序员都会注意css文件的正确编码问题,所有保险起见,一般会加上引号。当然,解决这种问题的最好方法是使用别名。比如宋体,其实应该写成SimSon,这样哪怕浏览者的系统不支持中文,并且这个css文件被错误的编码成了GB2132也没问题,浏览器还是知道这是宋体,并且做出正确的字体搜索。可惜,不是所有浏览器都支持就是了……