CSS字体：详解font属性

网络整理 - 07-27

CSS字体 font属性很重要，他可以用来控制文本的显示，它可以定义文本的字体、大小、加粗、风格（如斜体）和变形（小型大写字母）。本文我们就来详细讲解下font属性。

font属性具有较强的继承性，如对body设定的font-family、font-size等，都会应用到body包含的所有元素。

字体系列

font-family属性定义元素中文本的字体系列或具体的一种字体。

body {font-family: sans-serif;} //这样用户代理就会从 sans-serif 字体系列中选择一个字体（如 Helvetica），并将其应用到 body 元素。因为有继承，这种字体选择还将应用到body中包含的所有元素，除非有一种更特定的选择器将其覆盖。
div {font-family: Georgia;} //指定一种字体。
div {font-family: Georgia,serif;} //指定多种字体或字体系列。
div {font-family: Georgia,serif,'New Century Schoolbook';} //当字体名中有一个或多个空格（比如 New York），或者如果字体名包括#或$之类的符号，我们需要在font-family声明中加引号。

注意：在font-family属性中声明多个字体时，浏览器会从左至右查找这些字体。如果系统中存在该字体就予以显示，如果不存在则继续查找下一个。如果所有指定的字体或字体系列都没有，则会以系统或浏览器默认字体显示。

在CSS中，有两种不同类型的字体系列名称：
通用字体系列 – 拥有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”）
特定字体系列 – 具体的字体系列（比如 “Times” 或 “Courier”）

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：Serif、Sans-serif、Monospace、Cursive和Fantasy。

字体大小

font-size属性设置文本的大小，值可以是绝对值(12px)或相对值(1em、100%)。

div {font-size:18px;} //绝对值
div {font-size:1.2em;} //相对值

绝对值的优缺点：将文本设置为指定的大小、不允许用户在所有浏览器中改变文本大小（不利于可用性）、绝对大小在确定了输出的物理尺寸时很有用。
相对值的优缺点：相对于周围的元素来设置大小、允许用户在浏览器改变文本大小。

注意：如果你没有规定字体大小，一般浏览器中普通文本（如段落）的默认大小是16像素(1em=16px)。
使用以像素为单位的绝对值有利于我们精确控制文本字体大小，但是在IE中无法缩放文本大小(绝对值的劣势)。

body {font-size:100%;} //为 body 元素（父元素）以百分比设置默认的font-size值
h1 {font-size:3.75em;}
p {font-size:0.875em;}

上面的代码结合使用了百分百和EM，在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

字体加粗

font-weight属性设置文本的粗细程度，值可以是bold(加粗)、normal(正常)、100~900(值越大文字越粗)。

p {font-weight:normal;} //正常
strong {font-weight:bold;} //加粗显示，相当于数值700
div {font-weight:900;} //加粗显示

注意：100~900为字体指定了9级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100对应最细的字体变形，900对应最粗的字体变形。数字400等价于 normal，而700等价于 bold。

字体风格

font-style属性最常用于规定斜体文本，它的三个值：normal(正常显示)、italic(斜体显示)和oblique(倾斜显示)。

div {font-style:italic;} //元素中的文本斜体显示

注意：通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

字体变形

font-variant属性设定小型大写字母显示文本，即所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。它的默认值是normal(正常显示)。

div {font-variant:small-caps;} //small-caps属性值设定元素中文本以“小型大写字母”显示

font属性简写

与css background属性一样，font属性也有自己的简写方式。
书写顺序为：字体风格、字体变形、字体加粗、字体大小/行高、字体系列。

div#blog54173 {font:italic small-caps bold 12px/20px "SimHei";} //斜体、小型大写字母、加粗、12像素大小/20像素行高、黑体

注意：如果简写了元素的font属性，而且元素另外还有line-height属性(行高)需要声明的话，line-height属性一定要书写在简写的font属性之后，否则会导致line-height声明无效。

在font属性控制的5项中，字体系列、大小、加粗使用频繁，必须掌握。对中文页面来说，小型大写字母并不常用。