CSS字体属性_html/css_WEB-ITnose

CSS字体：

属性	描述
font	简写属性，把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。 （CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

1.字体系列：

（1）在 CSS 中，有两种不同类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）；

特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）；

（2）CSS 还定义了 5 种通用字体系列：

Serif 字体（衬线字体）

这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。对于中文来说，宋体属于serif字体，而对于中文来说，宋体属于serif字体，而英文，常用的serif字体为Times New Roman。

Sans-serif 字体

这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。对于中文来说，黑体、幼圆、雅黑则属于sans serif字体。而英文，常用的sans serif字体为Arial。

Monospace 字体(固定宽度)

Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。

Cursive 字体（草书）

这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。

Fantasy 字体

这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。

1. 指定字体系列：font-family属性

（1）作用：规定元素的字体系列，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

（2）浏览器支持性：所有主流浏览器都支持 font-family 属性。

Ps: 建议在所有 font-family 规则中都提供一个通用字体系列.

2. 字体风格：font-style属性

（1）作用：定义字体的风格；

（2）可能的值：

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

（3）italic 和 oblique 的区别：

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

（4）浏览器支持性：所有主流浏览器都支持 font-style属性。

3. 字体变形：font-variant属性

（1）作用：设定小型大写字母；

（2）可能的值：

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

（3）浏览器支持性：所有主流浏览器都支持 font-variant属性。

4. 字体加粗：font-weight属性

（1）作用：设置文本的粗细；

（2）可能的值：

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100-900	定义由粗到细的字符。400 等同 normal，700 等同 bold。
inherit	规定应该从父元素继承字体的粗细。

（3）浏览器支持性：所有主流浏览器都支持 font-weight属性。

5. 字体大小：font-size属性

（1）作用：设置文本的大小, 实际上它设置的是字体中字符框的 高度；实际的字符字形可能比这些框高或矮（通常会矮）；

（2）可能的值：

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。 默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

（3）比较px和em:

使用像素来设置字体大小:

通过像素设置文本大小，可以对文本大小进行完全控制；在 Firefox, Chrome, and Safari 中，可以重新调整以上例子的文本大小，但是在 Internet Explorer 中不行。虽然可以通过浏览器的缩放工具调整文本大小，但是这实际上是对整个页面的调整，而不仅限于文本。

使用 em 来设置字体大小:

为避免在 Internet Explorer 中无法调整文本的问题，可以使用 em 单位代替 pixels。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

#可以使用下面这个公式将像素转换为 em：

pixels/16=em

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）

（4）综合使用em和百分比：实现在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。例：

ps：普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。