用 CSS 的 font-family 修改 input type text 文字欄位字型

CSS 的 font-family 屬性用在修改 input type text 文字欄位字型相當便利,讓原本不太好看的 input type text 文字欄位預設字型透過 font-family 的美化,成為較具有質感的文字輸入欄位,當網友在填寫資料時,可以清楚的感受到設計師的用心,若您想進一步了解 CSS 的 font-family 屬性,請參閱《CSS font-family 網頁文字的字型設定》篇的詳細介紹,以下我們就直接進入用 font-family 屬性,修改 input type text 文字欄位各種預設字型的範例。

CSS font-family 屬性修改 input type text 文字欄位字型範例
範例實際輸出效果







範例呈現的是常用的字型,若沒有特別的需求,這些字型可以滿足大多數的網頁設計需求,比較需要注意的是,範例其中的新細明體、標楷體以及微軟正黑體都屬於 Windows 字型,若瀏覽者採用的是 iOS、Android 或 Linux 等作業系統,很可能沒有內建這幾種語法,建議設為網頁設計師在使用這些字型時,同時把幾個通用字型寫入 font-family 的字型順序中,減少預設字型無法挑選的問題,我們在《CSS font-family 網頁文字的字型設定》篇有詳盡的字型順序使用規則以及通用字型介紹。

延伸閱讀:HTML input type text 表單文字欄位

更多 CSS font-family 應用技巧
分享於 2014-12-03