CSS font bold 粗體字設定

文字的設定一般最常見的變化除了顏色之外就是粗細了，設定文字的粗細必須使用 font-weight，粗體則設定為 bold。

基本語法

font-weight:bold;

如此一來就可以顯示粗體字。

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 屬性

<span style="font-size:12px;">這是 12px 的文字大小</span>
<span style="font-size:16px;">這是 16px 的文字大小</span>
<span style="font-size:20px;">這是 20px 的文字大小</span>

範例的效果

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

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

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

<span style="font-weight:normal;">這是一般粗細的文字</span>
<span style="font-weight:bold;">這是粗體的文字</span>

範例的效果

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

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

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

<span style="font-style:normal;">這是正體字</span>
<span style="font-style:italic;">這是斜體字</span>
<span style="font-style:oblique;">這是斜體字</span>

範例的效果

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

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

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

<span style="font-family:新細明體;">這是新細明體</span>
<span style="font-family:標楷體;">這是標楷體</span>
<span style="font-family:微軟正黑體;">這是微軟正黑體</span>

範例的效果

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

網頁設計師可以採用 CSS 的 font-family 很輕鬆的把文字套用有特色的字型，效果類似傳統 HTML 的 face 屬性，不過 CSS 的 font-family 功能更強大，允許網頁設計師一次設定多個不同的字型，減少字型無效的情況發生。