CSS font 文字屬性

CSS font 文字屬性的功能是用來控制網頁文字的大小、粗細、樣式、字型等效果，控制這幾種文字外觀的 CSS 屬性分別是 font-size、font-weight、font-style 以及 font-family，這幾種屬性都是目前標準的 CSS font 文字屬性並已受到絕大多數主流瀏覽器的支援，幾乎可以完全取代傳統 HTML 的 font tag 設計方式，以下我們將這幾種設計文字外觀的 CSS font 屬性各別做簡單的介紹。

CSS font 文字屬性表

屬性	說明
font-size	設定文字大小，屬性值採用 "數字 + 單位" 呈現，數字越大通常表示字體越大。
font-weight	設定文字粗細，屬性值設為 bold 即為粗體字，取代傳統 HTML <b> tag 或 <strong> tag。
font-style	設定文字樣式，有兩種斜體字屬性值可用，分別為 italic 及 oblique，取代傳統 HTML <i> tag。
font-family	設定文字字型，可設定多個不同字型依序排列，取代傳統 HTML face tag。

以下將表中這幾個常見的 CSS font 文字屬性應用到範例中，實際呈現它們的功能。

CSS font 文字屬性範例一、設定文字大小，使用 font-size 屬性

這是 12px 的文字大小
這是 16px 的文字大小
這是 20px 的文字大小

範例的效果

這是 12px 的文字大小這是 16px 的文字大小這是 20px 的文字大小

範例一展示的是透過 CSS font 文字屬性中的 font-size 屬性來調整網頁文字大小，上表中提到 font-size 的屬性值可用＂數字+單位＂來呈現，數字越大帶表字體越大，從範例的呈現效果可以看到 20px 的字體遠遠大過於 12px 的字體，我們僅用三個數字就能創造出三種不同大小的文字，還有更多種關於 font-size 設定方式，例如利用不同的單位，請參閱《CSS font-size 文字大小》篇的詳細介紹。

CSS font 文字屬性範例二、設定文字粗體，使用 font-weight 屬性

這是一般粗細的文字
這是粗體的文字

範例的效果

這是一般粗細的文字這是粗體的文字

CSS 的 font-weight 是標準的網頁文字粗體字設計屬性，效果與傳統 HTML 的 , 標籤一樣，範例中「font-weight:normal;」的意思是讓文字呈現正常粗細，而「font-weight:bold;」則是讓文字呈現粗體字，我們在《CSS font-weight 設定字體粗細》曾經介紹過。

CSS font 文字屬性範例三、設定文字樣式

這是正體字
這是斜體字
這是斜體字

範例的效果

這是正體字這是斜體字這是斜體字

傳統 HTML 在設計文字斜體時，通常會採用 標籤，在 CSS font 文字屬性中的替代語法是 font-style 屬性，從範例中可以看到 CSS 的 font-style 屬性有 italic 與 oblique 這兩種屬性值，都可以創造出斜體字效果，詳細研究請看《CSS font-style 屬性》篇的內容。

CSS font 文字屬性範例四、設定文字字型

這是新細明體
這是標楷體
這是微軟正黑體

範例的效果

這是新細明體這是標楷體這是微軟正黑體

網頁設計師可以採用 CSS 的 font-family 很輕鬆的把文字套用有特色的字型，效果類似傳統 HTML 的 face 屬性，不過 CSS 的 font-family 功能更強大，允許網頁設計師一次設定多個不同的字型，減少字型無效的情況發生。範例四只是幾個常見於 Windows 作業系統的文字，還有更多好看的網頁文字字型可以透過 font-family 屬性來套用，請看《CSS font-family 字型》篇的完整內容介紹。

更多網頁文字技巧