CSS font-style 設計文字樣式 - CSS 學習筆記

CSS font-style 設計文字樣式為斜體字，傳統的 HTML 語法中的 i 標籤可以用來將文字標示為斜體，例如這樣「這是利用 i 標籤做的協體字」，如果把設計語法改到 CSS Design 呢？答案就是今天要介紹的主題 font-style 屬性，利用 CSS font-style 設計出來的斜體字與 HTML i 標籤的效果其實是一樣的，而且 font-style 還提供了兩種不同的斜體字設定（雖然效果看起來沒有什麼差別），以下我們就來看看這個 CSS 的 font-style 屬性要怎麼使用。

CSS font-style 屬性語法

font-style: 文字樣式參數設定;

CSS font-style 的文字樣式參數有好幾種設定方式，其中有兩個比較有實際效用，分別是 italic 與 oblique 這兩個，其他的設定値其實用不太到，整理成下表給各位參考看看囉！

CSS font-style 屬性可用的值與效果

設定值	語法	說明
normal	font-style:normal;	預設值，瀏覽器自行判斷文字樣式。
italic	font-style:italic;	文字斜體樣式
oblique	font-style:oblique;	文字斜體樣式
initial	font-style:initial;	將文字樣式設為預設值。
inherit	font-style:inherit;	繼承父層的 font-style 屬性值。

CSS font-style 屬性的應用範例

功能：在新視窗開啟程式碼文字檔

範例所呈現的視覺效果

normal 的文字樣式
italic 的文字樣式
oblique 的文字樣式
initial 的文字樣式

我們採用四個 span 標籤把四個不同的 font-style 屬性值分別顯示出來，可以清楚的看到，只有 italic 與 oblique 這兩個屬性值具有斜體字的效果，normal 與 initial 這兩個有寫等於沒寫，至於最後一個 inherit 為什麼我們沒有寫呢？因為那是繼承父層的 font-style 屬性值，範例的 span 並沒有父層，所以寫了也等於沒寫，而且少部份的瀏覽器不支援 font-style 的 inherit 屬性值，所以就不在範例中呈現了。

更多網頁文字樣式設計