CSS - font 属性

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	它指定字体样式。默认值为 normal。
font-variant	它指定字体变体。默认值为 normal。
font-weight	它指定字体粗细。默认值为 normal。
font-size	它指定字体大小和行高。默认值为 normal。
font-family	它指定字体系列。默认值取决于浏览器。
caption	它使用带标题控件（如按钮、下拉菜单等）使用的字体。
icon	它使用图标标签使用的字体。
menu	它使用下拉菜单使用的字体。
message-box	它使用对话框使用的字体。
small-caption	这是标题字体的较小版本。
status-bar	它使用状态栏使用的字体。
initial	这将属性设置为其默认值。
inherit	这从父元素继承属性。

CSS 字体属性示例

以下示例说明了font 属性及其各个组成部分。

设置文本的字体样式

要设置文本的字体样式，我们使用font 属性的font-style 组件。可以为 font-style 组件赋予不同的值，相应地文本将被修改。在以下示例中，italic 值已与 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 值已与 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 组件赋予不同的值，相应地文本将被修改。在以下示例中，bolder 值已与 font 属性的 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 组件赋予不同的值，相应地文本将被修改。在以下示例中，larger 值已与 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 属性。在以下示例中，字体样式为 italic，字体变体为 small-caps，字体粗细为 bold，字体大小为 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 属性的 menu 值。在以下示例中，menu 值已与 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 值已与 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 值。在以下示例中，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_properties_reference.htm

打印页面