CSS - font 属性_CSS 菜鸟教程

CSS font 是一个简写属性，用于一次性设置多个字体属性，如 font-size、font-variant、font-weight、font-size、font-family 等，font-size 和 font-family 是必需的参数。如果缺少某个值，则使用默认值。

语法


font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;

属性值

值	描述
font-style	指定字体样式。默认值为正常。
font-variant	指定字体变体。默认值为正常。
font-weight	指定字体粗细。默认值为正常。
font-size	指定字体大小和行高。默认值为正常。
font-family	指定字体系列。默认值取决于浏览器。
caption	使用带字幕的控件（如按钮、下拉列表等）使用的字体。.
icon	使用图标标签使用的字体。
menu	使用下拉菜单使用的字体。
message-box	使用对话框使用的字体。
small-caption	标题字体的较小版本。
status-bar	I使用状态栏使用的字体。
initial	将该属性设置为其默认值。
inherit	将继承父元素的属性。

CSS 字体属性的示例

以下示例说明 font 属性及其各个组件。

设置文本的字体样式

为了设置文本的字体样式，我们使用 font 属性的 font-style 组件。可以为字体样式组件赋予不同的值，因此将修改文本。在以下示例中，斜体值已与 font 属性的 font-style 组件一起使用。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font-style: italic;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <p>This text is without the font style property.</p>
	 	 <div id="font">
	 	 	 	 This text is shows the font-style property.
	 	 </div>

</body>

</html>

设置文本的字体变体

为了设置文本的字体变体，该字体变体指定文本是否应以小写字体显示，我们使用 font 属性的 font-variant 组件。在以下示例中，small-caps value 已与 font 属性的 font-variant 组件一起使用。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font-variant: small-caps;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <p>This text is without the font variant property.</p>
	 	 <div id="font">
	 	 	 	 This text shows the font variant property.
	 	 </div>

</body>

</html>

设置文本的字体粗细

为了设置文本的字体粗细，它指定了文本的粗体，我们使用 font 属性的 font-weight 组件。可以为字体权重组件赋予不同的值，因此将修改文本。在以下示例中，较粗的值已与字体属性的 font-weight 组件一起使用。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font-weight: bolder;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <p>This text is without the font weight property.</p>
	 	 <div id="font">
	 	 	 	 This text shows the font weight property.
	 	 </div>

</body>

</html>

设置文本的字体大小

为了设置文本的字体大小，这指定了文本的大小，我们使用 font 属性的 font-size 组件。可以为 font-size 组件赋予不同的值，因此文本将被修改。在以下示例中，已将较大的值用于 font 属性的 font-size 组件。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font-size: larger;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <p>This text is without the font size property.</p>
	 	 <div id="font">
	 	 	 	 This text shows the font size property.
	 	 </div>

</body>

</html>

设置文本的字体系列

为了设置文本的字体系列，它指定了文本的版式，我们使用 font 属性的 font-family 组件。可以为 font-family 组件赋予不同的值，因此将修改文本。在以下示例中，Impact 值已与 font 属性的 font-family 组件一起使用。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font-family: Impact;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <p>This text is without the font family property.</p>
	 	 <div id="font">
	 	 	 	 This text shows the font family property.
	 	 </div>

</body>

</html>

一次设置所有值

为了一次设置所有值（font-style、font-variant、font-weight、font-size 和 font-family），我们使用 font 属性。在以下示例中，字体样式为斜体，字体变体为小写字母，字体粗细为粗体，字体大小为 30px，字体系列为 Times New Romans。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font:italic small-caps bold 30px Times New Romans;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <p>This is normal text.</p>
	 	 <div id="font">
	 	 	 	 This text shows the font property.
	 	 </div>

</body>

</html>

设置字幕的字体

为了设置带字幕的控件（如按钮、下拉列表等）的字体，我们使用 font 属性的 caption 值。在以下示例中，caption 值已与 font 属性一起使用。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font: caption;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <div id="font">
	 	 	 	 The caption value is used for captions.
	 	 </div>

</body>

</html>

设置图标标签的字体

为了设置图标标签使用的字体，我们使用 font 属性的 icon 值。在以下示例中，icon 值已与 font 属性一起使用。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font:icon;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <div id="font">
	 	 	 	 This icon value is used for icon labels.
	 	 </div>

</body>

</html>

设置下拉菜单的字体

为了设置下拉菜单使用的字体，我们使用 font 属性的菜单值。在以下示例中，菜单值已与 font 属性一起使用。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font:menu;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <div id="font">
	 	 	 	 The menu value is used for dropdown menus.
	 	 </div>

</body>

</html>

设置消息框的字体

要设置消息框的字体，我们使用 font 属性的 message-box 值。在以下示例中，message-box value 已与 font 属性一起使用。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font:message-box;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <div id="font">
	 	 	 	 The message box is value is used for dialog boxes.
	 	 </div>

</body>

</html>

为标题设置小字体

为了为标题设置小字体，我们使用 font 属性的 small-caption 值。在以下示例中，small-caption 值已与 font 属性一起使用。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font:small-caption;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <div id="font">
	 	 	 	 The small-caption value is a smaller version of caption value.
	 	 </div>

</body>

</html>

设置状态栏的字体

为了设置状态栏的字体，我们使用 font 属性的状态栏值。在以下示例中，status-bar 值已与 font 属性一起使用。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #font {
	 	 	 	 	 	 font:status-bar;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>CSS font property</h2>
	 	 <div id="font">
	 	 	 	 The status-bar value is used for status bars.
	 	 </div>

</body>

</html>

支持的浏览器

属性
font	1.0	4.0	1.0	1.0	3.5

<< CSS Flexbox - flex-shrink 属性 CSS - @font-face 属性 >>