字体笔记
昨天,我写了纪录片《Helvetica》的观后感。因为内容与字体有关,我就借这个机会,整理一下关于字体的笔记。
需要说明的是,下面提到的字体都是指英语字体。中文字体因为各个平台差别太大,所以这里就不考虑了。
==================
一、字体的种类
字体一共可以分为6个大类。
1. serif (衬线类)
2. sans-serif(无衬线类)
字母末段带有装饰线的就是serif,反之就是sans-serif。
![serif_sanserif.png](http://i260.photobucket.com/albums/ii7/ruanyf/blog/serif_sanserif.png)
上图中左边的就是衬线类字体Georgia,右边的就是无衬线类字体Verdana。
一般来说,serif比较庄重,sans-serif相对活泼。因为serif带有衬线,在小字号下,不如sans-serif清晰,所以serif字体可以用作标题,sans-serif字体可以用作正文。
3. Handwritten Fonts(手写类字体)
这种字体模仿人的笔迹,一般只在体现某种艺术效果时使用。下面的图中就是四种手写类字体。
![type_handwrittenthumb.png](http://i260.photobucket.com/albums/ii7/ruanyf/blog/type_handwrittenthumb.png)
4. Fixed-width Fonts(等宽字体)
这种字体每个字母的宽度相等,一般用来模拟命令行输入和打字机效果,现在多用于展现程序源码。
![type_mono-typethumb.png](http://i260.photobucket.com/albums/ii7/ruanyf/blog/type_mono-typethumb.png)
5. Novelty Fonts(花式字体)
这种字体纯粹就是追求装饰性,20世纪之前的印刷品都用这类字体。
![type_noveltythumb.png](http://i260.photobucket.com/albums/ii7/ruanyf/blog/type_noveltythumb.png)
6. Dingbat Fonts(符号字体)
这类字体不是字母,而是输出各种各样的符号。
![type_dingbatsthumb.png](http://i260.photobucket.com/albums/ii7/ruanyf/blog/type_dingbatsthumb.png)
二、三种sans-serif字体
在制作网页的过程中,主要使用sans-serif字体。下面就是最常用的三种。
1. Verdana
Verdana几乎在所有平台上都预装了,所以是sans-serif字体的第一选择。它的特点就是字母间距比较宽,字母本身的宽度也比较大,所以比较容易阅读。
![verdana_detail.png](http://i260.photobucket.com/albums/ii7/ruanyf/blog/verdana_detail.png)
2. Trebuchet
Trebuchet的特点也是宽度大,形状清晰。
![trebuchet_detail.png](http://i260.photobucket.com/albums/ii7/ruanyf/blog/trebuchet_detail.png)
3. Helvetica
Helvetica的特点是小写字母比较大。
![helvetica_detail.png](http://i260.photobucket.com/albums/ii7/ruanyf/blog/helvetica_detail.png)
三、互联网安全字体(web safe fonts)
所有平台都预装的字体,被称为"安全字体",因为它可以保证所有用户的视觉效果是一样的。
以下九种字体就是"安全字体":Arial、Arial Black、Comic Sans MS、Courier New、Georgia、Impact、Times New Roman、Trebuchet MS和Verdana。
![type_safe-fontsthumb.png](http://i260.photobucket.com/albums/ii7/ruanyf/blog/type_safe-fontsthumb.png)
网上已经有人整理出了所有"安全字体"的CSS写法,我把它照抄过来,效果可以看这里。
1. serif类
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Times New Roman, Times, serif;
font-family: Bookman Old Style, serif;
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
2.sans-serif类
font-family: Arial, Helvetica, sans-serif;
font-family: Arial Black, Gadget, sans-serif;
font-family: Impact, Charcoal, sans-serif;
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-family: MS Sans Serif, Geneva, sans-serif;
font-family: MS Serif, New York, sans-serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, Zapf Dingbats, sans-serif;
3. 手写类
font-family: Comic Sans MS, cursive;
4. 等宽类
font-family: Courier, monospace;
font-family: Courier New, Courier, monospace;
font-family: Lucida Console, Monaco, monospace;
[延伸阅读]
1. The Principles of Beautiful Typography, By Jason Beaird
2. The Anatomy of Web Fonts, By Andy Hume
(完)
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式。但是它本身是不支持修改字体、字号与颜色等功能的! CSDN-markdown编辑器是其衍生版本,扩展了Markdown的功能(如表格、脚注、内嵌HTML等等)!对,就是内嵌HTML,接下来要讲的功能就需要使用内嵌HTML的方法来实现。
换个字体解决Dreamweaver文字选不中的问题 在使用Dreamweaver时,有时我们要选中一些字符进行编辑或删除,光标在英文字上面可以选中,在中文字上面就选不中,郁闷吧。比如在编辑下面这段文字的时候,如图所示, 想选中“你难得已经忘了吗?”,当鼠标点击你的时候,实际的光标却在前面的“失败”上,所以就选不中那句话 其实这个是代码视图的字体问题。
字体大宝库:30款英文大写字体免费下载 网络有这么多的字体,要挑选一款适合你设计的是相当具有挑战性。今天这篇文章,我想给大家分享30款免费的英文大写字体。和其它字体不同,大写字体几乎无处不在,无论你建立什么样的设计项目。看看这个列表,选择你喜欢的字体下载吧! 您可能感兴趣的相关文章
字体大宝库:12款好看的手写艺术字体免费下载 《字体大宝库》系列给大家带来最新12款好看的英文手写艺术字体可以免费下载使用,相信里面有你喜欢的。手写字体常用于印刷、网页设计及其它创意设计任务中,能够强调设计的自然性、非正式性,让设计作品看起来更有个性、更可爱。
阮一峰 阿里技术专家。著名技术博客作者,技术方向为 React + Node,自由软件运动的支持者