用 css font-family 修改 textarea 內的文字字型

CSS font-family 除了可以用來設定與修改網頁內的文字字型,還可以用來美化 HTML 表單內的 textarea 文字欄位字型,讓網友在輸入文字的同時,能夠呈現與網頁整體風格相仿的美感,透過 font-family 修改 textarea 文字字型相當簡單,僅需一行語法即可完成,而且後續要再修改為其他字型也很便利,以下準備了幾個不同字型效果的呈現給各位參考,幾乎所有主流的瀏覽器都支援。

用 css font-family 修改 textarea 內的文字字型範例
<textarea style="font-family:serif;">這是 serif 字型</textarea>
<textarea style="font-family:sans-serif;">這是 sans-serif 字型</textarea>
<textarea style="font-family:cursive;">這是 cursive 字型</textarea>
<textarea style="font-family:fantasy;">這是 fantasy 字型</textarea>
<textarea style="font-family:monospace;">這是 monospace 字型</textarea>
呈現效果
常用到的 font-family 安全字型有五種,分別是 serif、sans-serif、cursive、fantasy 以及 monospace,如同範例中的寫法,直接把 font-family 寫在 textarea 的開頭標籤內即可,textarea 內的所有文字都會以我們設定的字型呈現。

還不熟悉 HTML textarea 的設計規則嗎?先閱讀這篇:HTML textarea 文字欄位

常用到的安全字型也許不足以滿足所有設計師所想要呈現的風格,font-family 當然不只有這樣而已,若您想把 textarea 的字型修改為其他 Windows 常見的字型如新細明體、標楷體或是微軟正黑體也辦得到,請參閱這一篇:CSS font-family 字型

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012