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

2024-07-11 08:23:05

字体：大中小

来源：转载

供稿：网友

一、小述

作为一个并非前端开发的人，却有时候喜欢前端的一些东西。如果说网站是一项建筑工程的话，那么后台就是比较重量级的钢筋水泥土，先搭建好整体框架，然后再慢慢地填充。那么前端就是修补、装饰、美化等工作了，它起到了让人一眼都爱上她的作用。一个网站的好坏，不仅仅是性能上的比较，很多时候是界面美化和用户体验上的。对于界面美化，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;