网页设计之字体在页面排版上的完全攻略

触摸不到迩旳素

触摸不到迩旳素

2016-02-19 16:32

今天图老师小编要向大家分享个网页设计之字体在页面排版上的完全攻略教程,过程简单易学,相信聪明的你一定能轻松get!

  我们每天设计都在与字体打交道。但是我们一直没有认真在意他们的存在。我们没有很好地使用过他们,甚至滥用他们。这一切是因为我们不了解他们。字体作为排版的重要元素之一;在设计里也是最深奥的一门学问之一。本文中,就与大家来一起探讨一下这门深奥的学问。

  字体的类型

  英文字体(Typeface),分为几种大类,这是在使用英文字体的时候必须知道的基本知识:

  一、衬线体(Serif)

  衬线(serif)就是笔画边缘的装饰部分。下图中红色标注的地方就是衬线。

  衬线设计的初衷是为了更清楚地标明笔触的末端,提高辨识率,提高阅读速度。另外,使用衬线字体会让人感觉更加的正统。所以我们常见的英文书籍,特别是论文、小说,很多都是使用衬线体来完成正文的。

  网页设计中常用的衬线体有Times New Roman和Georgia。下图左边是12px的Times New Roman字体,右边是12px的Georgia。

  在中文里,我们使用的宋体就是对应的衬线字体。

  二、非衬线体/无衬线体(Sans-serif)

  字体如果不带衬线的话,那么就称为非衬线体或者无衬线体。下图就是非衬线体。

  网页设计中常用的非衬线体相对就比较多了。有Arial、Verdana、Tahoma、Helivetica、Calibri等。下图从左到右依次是Arial、Verdana、Tahoma:

  值得注意的是,虽然在书籍中,衬线字体被广泛地应用,但是在互联网上,衬线字体很少被使用。由于电脑屏幕分辨率与书籍不具可比性,所以正文10~12px的 衬线字体在电脑屏幕上是很难辨认的。下图是没有Cleartype时,10px的Verdana和10px的Times New Roman的对比。大家可以发现,左侧的Verdana可以被很好的辨识。右侧的Times New Roman辨认相当困难。

  三、等宽字体(Monospace)

  等宽字体事实上只针对西文字体。因为英文字母的宽度各不相同。例如i就要比m窄很多。编程时显示代码,如果字母不等宽那么排版将很难看。我们在DOS命令行中,可以看到使用的是等宽字体。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  编程要求的等宽字体有如下要求:

  1、所有字符等宽;

  2、简洁、清晰、规范的字符形体;

  3、支持ASCII码为128以上的扩展字符集;

  4、空白字符(ASCII: 0×20)与其他字符等宽;

  5、1、l和i等三个字符易于区分;

  6、0、o和O等三个字符易于区分;

  7、双引号、单引号的前后部分易于区分,最好是镜像对称的;

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  8、清晰的标点符号外形,尤其是大括符、圆括符和方括符。

  常见的等宽字体有Courier,Courier New

  四、手写体(Calligraphy)

  顾名思义,手写体就是手写风格的字体。有时我们也叫它书法字体。中文的书法字体大多都比较生硬。个人更推荐使用日文的书法字体。日文书法字体跟加柔美,更人性。但时使用日文书法字体缺点就是大都都是繁体,另外很多汉字会缺少。

  五、符号体(Symbol)

  Windows里最著名的符号体就是Webdings(记得以前还在Windows 95的时候蛮爱用的)。下面是Webdings字体的几个:

  图片看不清楚?请点击这里查看原图(大图)。

展开更多 50%)
分享

猜你喜欢

网页设计之字体在页面排版上的完全攻略

Web开发
网页设计之字体在页面排版上的完全攻略

防止网页被盗用 网页加密完全攻略

Web开发
防止网页被盗用 网页加密完全攻略

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页背景设计全攻略

Web开发
网页背景设计全攻略

弹出网页窗口设计全攻略

Html CSS布局 Div+CSS XHTML
弹出网页窗口设计全攻略

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

《神偷3》完全攻略

电脑网络
《神偷3》完全攻略

《鬼武者》完全攻略

电脑网络
《鬼武者》完全攻略

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

在VB6中将XML传入一个TreeView控件

在VB6中将XML传入一个TreeView控件

你不得不知的Win7七十个实用技巧集萃

你不得不知的Win7七十个实用技巧集萃
下拉加载更多内容 ↓