★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

关于字体在CSS中处理效果的思考

天极网 2007/12/23 19:34:42 深山行者 字体:  浏览 5226 我要评论
当前标签
字体
字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所以,了解一点字体的基本知识对于设计来说还是非常重要的。

  中文和英文的最大区别就是中文是方块字,英文是拼音文字,这对字体的处理的影响是巨大的。看看下面的图示就会发现,英文字体里的那些变化在中文字体里都弱化了。  

字体

  作为中文的读者,习惯性的接受方块形状做为阅读的单元,其实对于眼睛来说,这是一种容易疲劳的方式,阅读的时候你的视线实际上是跟随整行文字的外形。看看这个例子。

  NOW I''VE TRIED TO TALK TO YOU AND MAKE YOU UNDERSTAND

  Now I''ve tried to talk to you and make you understand

  哪一行更容易读呢?

  第一行和中文的情形有些类似,不同的是,每个中文单字就好比一幅画,其变化要比26个英文字母丰富的多,对于我们来说,我们接受了这个特点,但是设计时还是有一些问题需要考虑。设计原则本身就是为了打破原则,这也是所谓的creativity的表现。问题是你需要先知道原则,并且顺从原则进行练习,只有在你熟悉原则之后才有可能打破原则显现你的创造性,打破原则不意味着原则的缺陷和错误,只是你对这些原则的别出心裁的使用,你打破了一些,同时也对你所破坏的部分做一定的补偿,似乎很有点哲学的味道。

  重要的几个原则是(适用于英文的情形):

  字体的选用要考虑该文字的用途,是做标题呢,还是段落文字?

  通常来说 san serif 字体适合作为标题使用,例如 Arial;serif 字体适合作为段落文字使用,例如Time New Roman。对于网页设计来说,有几个字体是强烈推荐的,verdana, tahoma, georgia。事实上,像 Verdana 这个字体是由世界上顶级的字体设计师花了差不多两年时间设计出来的,Microsoft负责买单, 然后免费提供给用户,这个字体是IE安装的一部分,如果你安装了IE 4以上的版本,你的电脑里就一定有这个字体,所以你不必担心用户是否有这个字体。它的设计考虑了字体在屏幕上显示的可能面对的问题,而且提供了近乎完美的答案。唯一的麻烦是它的近乎完美造成了我们使用的时候没有了个性,因为每个人都使用它。

  字号的大小?

  论坛里很多讨论,关于pixle 好还是point好?在这里我想提出的是字号的大小在CSS里,有很多不同的单位,大致上有三类:

以下是引用片段:
  绝对大小:mm, cm, in, pt, pc
  相对大小:em, ex
  相对于设备:px

  可能要多说几句的是 em 和 ex,em 在 css 里代表就是字体字号的大小,例如对于12 pt的字体来说, 1 em 就等于12 pt 范例:

以下是引用片段:
p {
font-size: 10pt;
text-indent: 1em
}

  ex 和 em 类似,但不尽相同, 回到上面的图示,x-height 对于每一种字体来说是不同的,ex 是根据字体的 x-height 来定义字体的大小。

  对齐方式?

  最好使用左对齐,尤其要避免使用左右对齐,除非你有一个特殊的设计目的,左对齐时右侧的不对齐正是为了阅读的方便,右侧的变化对你的视力是一个帮助,它借助变化告诉你的眼睛可以换行了。

  行间距?

  行间距取决于字体的大小,一般来说,小的字号需要大一点的行间距来便于阅读,中文字体在网页上如果没有行间距的设定,对于阅读大段文字来说是读者的灾难,所以适当设定line-height是非常必要的。一般地, line-height 在网页设计中应该是字体大小的1.5倍到2倍。Word 和其它的文本编辑软件里, 一般设定字体的120%作为缺省的行间距。css里的 line- height 设定,是均分后加在每一行的上下,也就是说,如果 line-height 设定为 20px 的话,那么每一行文字的上下各有10px的间距。

  字间距和字符间距?

  很特殊的用途,对中文来说这两者应该是相同的。这个设定的本身就是为了解决某些字体设计上缺陷,来增加文字的可读性。

相关阅读
( 2020/1/20 13:48:55 )利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
( 2018/3/16 17:00:02 )利用aspJpeg组件生成多图片水印组合时给加上透明水印图片
( 2010/8/20 14:15:15 )利用asp正则功能去除网页中自定义HTML标记(来自eWebEditor)
( 2009/9/4 8:24:11 )超级实用且不花哨的js代码大全( 2 )
( 2009/5/29 20:48:21 )Div+CSS+JS树型菜单,可刷新
( 2009/2/23 22:35:34 )css改变页面中的文字颜色与字体粗体
( 2008/12/10 21:30:43 )页面文字变色、变大、还原
( 2008/12/10 21:22:26 )增大、缩小、还原字体
共有0条关于《关于字体在CSS中处理效果的思考》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
利用css中的scale()实现放大缩小效果
利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
css背景使用base64编码或者将base64编码放在img图片标签中
利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
解决手机端微信浏览器中视频自动播放和默认全屏问题
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
更多>>最新添加文章
asp无限级调用分类显示
Object.assign的一些用法
利用css中的scale()实现放大缩小效果
uni-app操作json数组
uni-app自定义loading组件
uni-app一个像商城分类中心一样的联动侧边栏导航分类
uni-app实现tab选项卡
uni-app的父与子页面传递参数之属性Props字段类型讲解
更多>>随机抽取信息
CSS的常用的一些技巧
asp加载xml 用于验证目标网站是否更新
复制信息给好友代码
制作外贸企业英文网站存在的误区查看与更改方法
自由鸟
ASP FSO读取XX文件夹下的所有文件与创建使用时间
div+css中absolute标签与relative标签的巧妙运用
北京阳光无限经贸有限公司