css 中 font 属性详解

Font properties字体属性

font-style: italic;

定义和用法

font-style 属性定义字体的风格。

说明

该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。

默认值：	normal
继承性：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontStyle="italic"

可能的值

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

font-weight: bold;

定义和用法

font-weight 属性设置文本的粗细。

说明

该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。

默认值：	normal
继承性：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontWeight="900"

可能的值

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

font-size: .8em;

定义和用法

font-size 属性可设置字体的尺寸。

说明

该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。

默认值：	medium
继承性：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontSize="larger"

可能的值

值	描述
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	规定应该从父元素继承字体尺寸。

line-height: 1.2;

定义和用法

line-height 属性设置行间的距离（行高）。

注释：不允许使用负值。

说明

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

默认值：	normal
继承性：	yes
版本：	CSS1
JavaScript 语法：	object.style.lineHeight="2"

可能的值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

font-family: Arial, sans-serif;

定义和用法

font-family 规定元素的字体系列。

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

有两种类型的字体系列名称：

• 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
• 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。

注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

默认值：	not specified
继承性：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontFamily="arial,sans-serif"

可能的值

值	描述
family-name generic-family	用于某个元素的字体族名称或/及类族名称的一个优先表。 默认值：取决于浏览器。
inherit	规定应该从父元素继承字体系列。

以下三个属性不常用

font-variant: normal

定义和用法

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

说明

该属性主要用于定义小型大写字母文本。理论上，用户代理可以根据正常字体计算出小型大写字母字体。

默认值：	normal
继承性：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontVariant="small-caps"

可能的值

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

font-size-adjust: none（CSS2.0/CSS3）

定义和用法

font-size-adjust 属性为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

说明

字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读。举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px ）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。

默认值：	none
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.fontSizeAdjust="0.70"

可能的值

值	描述
none	默认。如果此字体不可用，则不保持此字体的 x-height。
number	定义字体的 aspect 值比率。 可使用的公式： 首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）=可应用到可用字体的字体尺寸 举例： 如果 14px 的 Verdana（aspect 值是 0.58）不可用，但是某个可用的字体的 aspect 值是 0.46，那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。

font-stretch: normal（CSS3）  

定义和用法

font-stretch 属性可对当前的 font-family 进行伸缩变形。

默认值：	normal
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.fontStretch="ultra-expanded"

可能的值

值	描述
normal	默认值。把缩放比例设置为标准。
wider	把伸展比例设置为更进一步的伸展值
narrower	把收缩比例设置为更进一步的收缩值
ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded	设置 font-family 的缩放比例。 "ultra-condensed" 是最宽的值，而 "ultra-expanded" 是最窄的值。

可以缩短为以下内容。

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;


以上五个属性可以缩写为：
font: italic bold .8em/1.2 Arial, sans-serif;