|
当你选择某种字体时，必须保证选定的字体不但要在选定的平台上看起来不错，还要保证在其他平台上也能正常显示。没有人强迫你按照某种方式设计。Web是一个开放式的环境，采用自己喜欢的字体，不要被一些考虑不充分的意见动摇，只要保证你的网站访问者能够阅读它就行。
字体使用基本原则：清晰+易读！
当你选择某种字体时，必须保证选定的字体不但要在选定的平台上看起来不错，还要保证在其他平台上也能正常显示。没有人强迫你按照某种方式设计。Web是一个开放式的环境，采用自己喜欢的字体，不要被一些考虑不充分的意见动摇，只要保证你的网站访问者能够阅读它就行。
下面是归纳的几种Web安全字体，注意它的用途只是建议性的，不要求一定这样做 ^_^!
Web安全字体
| 字体名称 |
字体类型 |
字体特点 |
用途 |
Demo |
| Verdana |
非衬线（sans-serif） |
可读性强，适合在小字体中使用，99%的Web用户机器上都有安装 |
主要用于政府性或重要的商业网站 |
Verdana |
| Georgia |
衬线（serif） |
专为屏幕显示而设计的，它的斜体清晰易读 |
主要用于与历史有关的网站 |
Georgia |
| Times New Roman |
衬线（serif） |
专为PC平台（屏幕显示）设计的，如果希望你的网页可读性更强，可使用Georgia替代 |
通常用于金融机构网站 |
Times New Roman |
| Times |
衬线（serif） |
针对Mac平台设计的Times New Roman字体，但不是专为屏幕显示而设计的 |
通常用于金融机构网站 |
Times |
| Arial |
非衬线（sans-serif） |
这种字体设计的网站看起来有现代感，运用广泛，不宜用于小字体 |
常用语高雅的博物馆网站设计 |
Arial |
| Helvetica |
非衬线（sans-serif） |
Mac机上与Arial最相似的字体，是现实世界中一种优良的打印字体，屏幕表现不好 |
可用于设计新兴传媒公司网站 |
Helvetica |
| Tahoma |
非衬线（sans-serif） |
在安装了Microsoft office的机器上都有Tahoma字体，适用性强，但与Verdana很相似所以用的少 |
设计商业网站 |
Tahoma |
| Comic Sans MS |
衬线（serif） |
看上去很轻率，是一种不正式的字体 |
常用于显示一些不滑稽的笑话或打印的邀请函 |
Comic Sans MS |
| Trebuchet |
非衬线（sans-serif） |
屏幕显示效果好，比大多数字体都小，试图用有限的空间显示相同的效果，IE各版本都有 |
可以用来设计个人公文包 |
Trebuchet |
| Courier |
等宽字体（Monospace） |
在水平、垂直方向排列的都很好，其中Courier New是最常用的当宽字体，但不宜用于过小字体，类似的还有Lucida Console(Windows)，American Typewriter(Mac)和Monaco(Mac) |
用来显示代码或仿真打印机文本 |
Courier |
下面是一组替代字体：
5种替代字体（候选字体）
| 字体名称 |
字体类型 |
字体特点 |
建议声明 |
Demo |
| Lucida Grande和Lucida Sans Unicode |
非衬线（sans-serif） |
前者预安装在Mac上，后者XP自带，他们是Verdana优秀替代字体，可读性强 |
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif ; |
Lucida Grande
Lucida Sans Unicode |
| Futura |
衬线（serif） |
有很好的现代外观，预安装在Mac OS上，用于大字体时效果更好 |
font-family: Futura, Helvetica, Arial, sans-serif ; |
Futura |
| Helvetica Neue |
非衬线（sans-serif） |
是Helvetica字体改进的版本，通过各种技巧使得字符之间间隔恰到好处，预安装在大部分平台和软件中 |
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif ; |
Helvetica Neue |
| Gill Sans |
非衬线（sans-serif） |
在文本和屏幕显示器中可读性都强，结构紧凑、粗体和显示版本是其非常适合用于包装和海报。预安装在Mac OS上 |
font-family: 'Gill Sans', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif ; |
Gill Sans |
| Palatino |
衬线（serif） |
安装在Mac OS和Windows上，是一种基于意大利文艺复兴形式的打印体，在文本和显示凸版印刷样式中的效果不错 |
font-family: Palatino, Georgia, 'Times New Roman', serif ; |
Palatino |
下面是用:first-letter实现首字下沉效果，实现方式如下：
复制代码代码如下:
p:first-letter {
float: left; /* 声明了段落文本的其余部分浮动于放大的下沉首字符周围 */
width: 40px; /* 保证首字符有足够的空间 */
font: 60px/50px 'lucida Grande'; /* 字体增大以放大首字符 */
padding: 10px 0 0 0; /* 用内边距控制下沉字符的垂直位置，以达到更漂亮的效果 */
}
关于浏览器默认字体，推荐下面的3篇文章：
1、网页设计中的默认字体
2、再谈 Web 默认字体
3、三谈 Web 默认字体
相信对您一定很有帮助的^_^ ! | 
发表于 2010-8-26 22:40:57
