设为首页
收藏本站
最新电影
> 子栏目 Asp | Jsp | XML | XSL | Div+Css | 自定义函数 | 数据库 | 脚本特效
您现在的位置: 首页=>后台技术=>div+css 订阅本栏目  
CSS 中字体处理效果的思考
时间: 2007-09-27 01:11:38 阅读次数:2405


字体的处理在网页设计中无论怎么强调也不为过毕竟网页使用来传递信息的而最经典最直接的信息传递方式就是文字所以了解一点字体的基本知识对于设计来说还是非常重要的

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





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

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个英文字母丰富的多对于我们来说我们接受了这个特点但是设计时还是有一些问题需要考虑我不是设计师如果说的不对请在下面留言讨论这些内容在我教授Typography的时候是作为一般原则来提出的我也告诉学生一句话:“The purpose of rule is to break the rule.” 设计原则本身就是为了打破原则这也是所谓的creativity的表现问题是你需要先知道原则并且顺从原则进行练习只有在你熟悉原则之后才有可能打破原则显现你的创造性打破原则不意味着原则的缺陷和错误只是你对这些原则的别出心裁的使用你打破了一些同时也对你所破坏的部分做一定的补偿飞飞As@p技术乐园似乎很有点哲学的味道

我个人以为比较重要的几个原则是(适用于英文的情形):

字体的选用要考虑该文字的用途是做标题呢还是段落文字?
通常来说 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 和 exem 在 css 里代表就是字体字号的大小例如对于12 pt的字体来说, 1 em 就等于12 pt 范例:

p {
font-size: 10pt;
text-indent: 1em
}

也许你会说我可以用text-indent: 10pt来实现同样的效果啊但那只是在理想的情形下如果用户觉得他的浏览器设置字体大小为14pt更好的时候你所设计的比例就失去了所以相对尺寸对于网页的可伸缩性设计是非常有利的

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

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

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

字间距和字符间距?
很特殊的用途对中文来说这两者应该是相同的飞,飞Asp技术乐园这个设定的本身就是为了解决某些字体设计上缺陷来增加文字的可读性




站内搜索    

下一篇CSS入门 基本语法

上一篇多点调用的 选项卡

本栏目最新 栏目最新列表
微软IE调试工具:SuperPreview for IE(ie6
精选15个国外最流行的CSS框架
CSS2 Media类型使用方法及简介(@Media)
浏览器排版/布局 图片下方出现空隙的问题
使用IE浏览器a链接失效(不能点击)的解决方
网站优化策划 栏目最新列表
增加网站外链的快速方法
网站上线前必做的30个检查
新的友情链接参考标准(没有google的PR情况
优化Google的AdSense广告的五个工具
王通讲SEO八大基础
站点最新 站点最新列表
微博推广的一些技巧
xhEditor v1.1.7 发布,
收集的一些轻量级非常实
50个新鲜兼容最新版本的
javascript中cookie的设
Excel中出现#VALUE!、#D
jquery插件:飞飞表情插件
十个使用HTML5开发的精彩
支持HTML5的浏览器有哪些
飞妮莫属:漫画:如何写出
历史最热10条信息  
MIME介绍 及 [1] [2] [3]
巧用Google和迅雷来下载
Transact SQL 常 [1] [2]
VIA Rhine II Fast Ethe
电脑常用端 [1] [2] [3]
Do you get a kick out
十道羊皮卷 欣赏+mp3版+
每日一句:A friend and
每日一句:Theres no tu
经典__悟透JavaScript
相关文章
CSS 中字体处理效果
Asp 正则表达式 过滤
zend studio 字体配
 
 width= 
伟哥博客 西安房产 123最新电影 三四六四