当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 文字 - Oceans Apart(二)

点击数:20712012-11-06 08:57:34 来源: 海盈网络

表5-1-1 CSS中的字体粗细

属性和值 效果

font-weight:normal            用常规字体显示。和weight为400等价。
font-weight:bold                粗体显示,一般情况下对应于700的weight喊,对少数字体对应于600的weight随。
font-weight : (300)              字体比正常粗细显得纤细,取值范围从最细的100到最粗的900。
font-weight : bolder            文字显示得比继承值更粗。例如一个段落的粗细已是bold,而这个段落内的strong元素的粗细为bolder.那这个strong元素中的文字将比段落内的其他文字更粗。唯一的例外是,假如继承得来的粗细已经是最高值900,那应用bolder后依然是900。
font-weight : lighter            文字显示得比继承值更细。如果继承的weight值为300,那计算所得的值将为200。与bolder类似的是,若继承值为100,计算所得的值还是100。
font-weight : inherit            使本段文字的字体粗细和父元素的一致。


      另一个字体格式是姿态,与之对应的CSS属性是font-style。所谓的字体姿态实际上是指字体的倾斜程度。姿态有两种。

      口Italic--种在常规字体基础上做过特殊设计的变体,一般带有手写风格。

      口Oblique-常规字体由浏览器作倾斜处理后的版本。和italics不同的是,oblique字体并不出自另外设计的变体,而仅仅是常规字体应用倾斜效果的结果。而多数人则错把oblique字体说成italic字体。

      font-style属性的合法值有normal、italic、oblique和inherit。

      2.字体对比度( type contrast)

      字体对比度指字型中粗的部分与细的部分之间的差异程度。不同字体的对比度相差很大,甚至有些字体没有任何粗细变化。

      在印刷作品设计中,人们经常用一种字体撰写标题,而使用另一种不同的字体撰写正文。通常做法中,圆滑、缺乏粗细对比的sans serif字体被用作标题用字,而Serif字体则常用作正文字体,这种设定在长段文章中的应用尤其广泛。你平日阅读的书籍大多沿用了这种设计方式,不过这种传统在当今的Web时代却受到了很大的质疑。

      3.字体色深( type color)

      字体色深指的是文字的深浅程度。例如Helvetica Light这样的字体相对较浅,这是由于此类字体较细因而含墨量较小。而Cooper或者Arial Black这类字体的含墨量就很高,因而显得重而深。当然,字体色深也不完全依赖于字体本身,其他因素如字距调整( kerning)、字间距(tracking)和行间距(leading)等也会影响人们感受到的字体色深。

      除了对比度外,字体的颜色也至关重要。例如,字体色相( type hue)的不同也能造成字体的差别,这又给设计师带来了更多选项。

      不过需要提示的是,通常情况下设计师都将作品中颜色的数量控制在一定范围之内。虽然诸如儿童主题比较适合加入多种颜色,但绝大多数情况下,在页面上使用过多颜色都会让人感觉不够专业。


      5.1.2 Oceans Apart中的字体

      在Oceans Apart中,我们可以看到Sims清晰而简洁的用字逻辑——所有的HTML中的文字都使用了Trebuchet字体,而备用字体也使用了几种sans serifs字体。

      body{font:11px "trebuchet ms", arial, helvetica, sans-serif;)

      Trebuchet本身也是一种sans serif字体,而且它还是Microsoft核心Web字体的一员,此外.Microsoft Office中也包含了这种字体,因而我们可以认为多数系统都能支持Trebuchet字体。但可以注意到,细心的Sims并没有遗漏设置备用字体这重要的一环。


本文为《CSS禅意花园》连载系列,版权归原作者及出版社所有,请勿用于商业目的活动,我们谨向原作者及CSS禅意花园网站表示敬意。
      海盈网站工作室采用标准的DIV+CSS布局制作各类型企业、行业网站,同时提供手机网站制作网站维护等全方位专业服务,欢迎咨询。

【责任编辑:(Top) 返回页面顶端