仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 867|回复: 9
打印 上一主题 下一主题

[DIV+CSS] 来看看:在 CSS 中关于字体处置效果的思索

[复制链接]
再见西城 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:18:54 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。
<P>字体的处置在网页计划中不管怎样夸大也不为过,究竟网页利用来传送信息的,而最典范最间接的信息传送体例就是笔墨,以是,懂得一点字体的基础常识关于计划来讲仍是十分主要的。
中文和英文的最年夜区分就是中文是方块字,英文是拼音笔墨,这对字体的处置的影响是伟大的。看看上面的图示就会发明,英笔墨体里的那些变更在中笔墨体里都弱化了。

作为中文的读者,习气性的承受方块外形做为浏览的单位,实在关于眼睛来讲,这是一种简单委靡的体例,浏览的时分你的视野实践上是跟从整行笔墨的形状。看看这个例子。
NOWIVETRIEDTOTALKTOYOUANDMAKEYOUUNDERSTAND
NowIvetriedtotalktoyouandmakeyouunderstand
哪一行更简单读呢?
第一行和中文的情况有些相似,分歧的是,每一个中文单字就比如一幅画,其变更要比26个英笔墨母丰厚的多,关于我们来讲,我们承受了这个特性,可是计划时仍是有一些成绩必要思索,我不是计划师,假如说的不合错误,请鄙人面留言会商。这些内容在我传授Typography的时分是作为一样平常准绳来提出的。我也告知先生一句话:“Thepurposeofruleistobreaktherule.”计划准绳自己就是为了冲破准绳,这也是所谓的creativity的体现。成绩是你必要先晓得准绳,而且依从准绳举行实习,只要在你熟习准绳以后才有大概冲破准绳展现你的制造性,冲破准绳不料味着准绳的缺点和毛病,只是你对这些准绳的别开生面的利用,你冲破了一些,同时也对你所损坏的部分做必定的抵偿,仿佛很有点哲学的滋味。
我团体觉得对照主要的几个准绳是(合用于英文的情况):
1、字体的选用要思索该笔墨的用处,是做题目呢,仍是段落笔墨?
一般来讲sanserif字体合适作为题目利用,比方Arial;serif字体合适作为段落笔墨利用,比方TimeNewRoman。关于网页计划来讲,有几个字体是我激烈保举的,verdana,tahoma,georgia。现实上,像Verdana这个字体是由天下上顶级的字体计划师花了差未几两年工夫计划出来的,Microsoft卖力买单,然后收费供应给用户,这个字体是IE安装的一部分,假如你安装了IE4以上的版本,你的电脑里就必定有这个字体,以是你不用忧虑用户是不是有这个字体。它的计划思索了字体在屏幕上显现的大概面临的成绩,并且供应了近乎完善的谜底。独一的贫苦是它的近乎完善形成了我们利用的时分没有了本性,由于每一个人都利用它。
2、字号的巨细?
论坛里良多会商,关于pixle好仍是point好?我就不反复了,在这里我想提出的是字号的巨细在CSS里,有良多分歧的单元,大抵上有三类,
相对巨细:mm,cm,in,pt,pc
绝对巨细:em,ex
相对设备:px
大概要多说几句的是em和ex,em在css里代表就是字体字号的巨细,比方关于12pt的字体来讲,1em就即是12pt典范:
p{
font-size:10pt;
text-indent:1em
}
大概你会说我能够用text-indent:10pt来完成一样的效果啊,但那只是在幻想的情况下,假如用户以为他的扫瞄器设置字体巨细为14pt更好的时分,你所计划的比例就得到了,以是绝对尺寸关于网页的可伸缩性计划长短常有益的。
ex和em相似,但不尽不异,回到下面的图示,x-height关于每种字体来讲是分歧的,ex是依据字体的x-height来界说字体的巨细。
3、对齐体例?
最好利用左对齐,特别要制止利用摆布对齐,除非你有一个特别的计划目标,左对齐时右边的不合错误齐恰是为了浏览的便利,右边的变更对你的目力是一个匡助,它借助变更告知你的眼睛能够换行了。
4、行间距?
行间距取决于字体的巨细,一样平常来讲,小的字号必要年夜一点的行间距来便于浏览,中笔墨体在网页上假如没有行间距的设定,关于浏览年夜段笔墨来讲是读者的劫难,以是得当设定line-height长短常需要的。一样平常地,line-height在网页计划中应当是字体巨细的1.5倍到2倍。Word和别的的文本编纂软件里,一样平常设定字体的120%作为缺省的行间距。css里的line-height设定,是均分后加在每行的高低,也就是说,假如line-height设定为20px的话,那末每行笔墨的高低各有10px的间距。
5、字间距和字符间距?
很特别的用处,对中文来讲这二者应当是不异的。这个设定的自己就是为懂得决某些字体计划上缺点,来增添笔墨的可读性。
每次写专栏的文章都有这类感到,越写越不晓得怎样开头,:)这大概就是漫笔体例的弊端吧。请留言会商,我这个就算是抛砖了.


在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
深爱那片海 该用户已被删除
沙发
发表于 2015-1-18 06:02:12 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
莫相离 该用户已被删除
板凳
发表于 2015-1-25 16:45:52 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
透明 该用户已被删除
地板
发表于 2015-2-3 11:53:45 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
简单生活 该用户已被删除
5#
发表于 2015-2-8 22:04:42 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
兰色精灵 该用户已被删除
6#
发表于 2015-2-26 12:02:09 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
再现理想 该用户已被删除
7#
发表于 2015-3-8 15:05:03 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
飘灵儿 该用户已被删除
8#
发表于 2015-3-16 03:47:50 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
金色的骷髅 该用户已被删除
9#
发表于 2015-3-22 20:11:31 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
谁可相欹 该用户已被删除
10#
发表于 2015-3-22 20:11:31 | 只看该作者
可以使用 CSS 检查工具进行设计。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-11 03:42

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表