网页设计:关于字体的应用技巧

作者: 来源: 更新时间:2013-02-01 16:30:39 点击:

一、小述

作为一个并非前端开发的人,却有时候喜欢前端的一些东西。如果说网站是一项建筑工程的话,那么后台就是比较重量级的钢筋水泥土,先搭建好整体框架,然后再慢慢地填充。那么前端就是修补、装饰、美化等工作了,它起到了让人一眼都爱上她的作用。一个网站的好坏,不仅仅是性能上的比较,很多时候是界面美化和用户体验上的。对于界面美化,Ps能很好胜任,本人Ps也不差,然后就是HTML系列、Css系列;对于用户体验上,我相信Javascript、Jquery、Ajax一定能胜任。

爱美之心,人人皆有,对于网站整体设计亦如此。今天就来学习网页设计中字体的技巧。

二、Css字体

1、字体系列:

W3C中说:在 CSS 中,有两种不同类型的字体系列名称:通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")、特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier"),这里我们最好配合使用,以免其他机器上没有安装指定的字体。

2、字体大小:

font-size 值可以是绝对或相对值。

绝对大小:

       (1).文本大小设置指定
       (2).不允许用户在所有浏览器中改变文本大小(不利于可用性)
       (3).绝对大小在确定了输出的物理尺寸时很有用

相对大小:
      (1).相对于周围的元素来设置大小
      (2).允许用户在浏览器改变文本大小

注意:如果没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。

这里W3C 推荐使用 em 尺寸单位。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。可以使用下面这个公式将像素转换为 em:pixels/16=em。

注意:无论是使用em还是pixels,在IE都有可能出现在重设文本大小时,会比正常的尺寸更大或更小的问题,对于这一点我们综合使用百分比和em就能很好解决。在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:如:body{font-size:100%;} h2{ font-size:1.5em}

更多相关参考:http://www.divcss5.com/html/h89.shtml

3、了解font-variant属性

font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。所有主流浏览器都支持 font-variant 属性。它有三个值:

normal:默认值。浏览器会显示一个标准的字体。

small-caps:浏览器会显示小型大写字母的字体。

inherit:规定应该从父元素继承 font-variant 属性的值。不做要求

如:

1: <div style=" font-variant:normal">boy</div><!--小写变成大写-->

2: <div style=" font-variant:small-caps">Boy</div><!--字体稍小—>

三、关于css字体简写
如:

1: font-size: 1em;

2: line-height: 1.5em;

3: font-weight: bold;

4: font-style: italic;

5: font-variant: small-caps;

6: font-family: verdana,serif;

可以简写为:font:bold italic 1em/1.5em  small-caps verdana,serif

注意的是:简写的顺序很重要,如果顺序不对那么就解析不出来,争取到属顺序是:font:字体粗细 字体样式 字体大小/行高 ……

四、Css字体距离

text-indent:20px;设置开头的缩进

letter-spacing:3px;设置字体间距

网页设计字体大全