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

列印頁面