首页 > 代码库 > CSS字体属性
CSS字体属性
CSS字体：
属性 | 描述 |
font | 简写属性，把所有针对字体的属性设置在一个声明中。 |
font-family | 设置字体系列。 |
font-size | 设置字体的尺寸。 |
font-size-adjust | 当首选字体不可用时，对替换字体进行智能缩放。 （CSS2.1 已删除该属性。） |
font-stretch | 对字体进行水平拉伸。（CSS2.1 已删除该属性。） |
font-style | 设置字体风格。 |
font-variant | 以小型大写字体或者正常字体显示文本。 |
font-weight | 设置字体的粗细。 |
1.字体系列：
（1）在 CSS 中，有两种不同类型的字体系列名称：
<1>通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）；
<2>特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）；
（2）CSS 还定义了 5 种通用字体系列：
<1>Serif 字体（衬线字体）
这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。对于中文来说，宋体属于serif字体，而对于中文来说，宋体属于serif字体，而英文，常用的serif字体为Times New Roman。
<2>Sans-serif 字体
这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。对于中文来说，黑体、幼圆、雅黑则属于sans serif字体。而英文，常用的sans serif字体为Arial。
<3>Monospace 字体(固定宽度)
Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
<4>Cursive 字体（草书）
这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
<5>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:
<1>使用像素来设置字体大小:
通过像素设置文本大小，可以对文本大小进行完全控制；在 Firefox, Chrome, and Safari 中，可以重新调整以上例子的文本大小，但是在 Internet Explorer 中不行。虽然可以通过浏览器的缩放工具调整文本大小，但是这实际上是对整个页面的调整，而不仅限于文本。
<2>使用 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)。
CSS字体属性