HTML textarea 表單多行文字輸入欄位內文字字型設計

傳統的 HTML 要在 textarea 表單都行文字輸入欄位內設計不同的字型，可以利用 HTML 本身內建的 font face 功能來設計，隨著 CSS 的發展，現在新一代的網頁設計師幾乎都是採用 CSS 內建的 font-family 屬性，來替 HTML 的 textarea 表單多行文字輸入欄位設計不同的顯示字型，應用方式非常簡單，我們會在範例中呈現幾種不同的常見字型與設計方式給各位網頁設計師們參考。

關鍵基礎語法

HTML textarea 的語法（詳細用法參閱：表單文字輸入欄位 textarea）
<textarea name="欄位名稱" style="欄位顯示樣式設定">欄位文字內容</textarea>
CSS font-family 屬性語法（詳細用法參閱：CSS font-family 網頁文字字型設定）
font-family: 排序第一的字型,排序第二的字型,排序第三的字型,排序第四的字型 ... ;
我們會在範例中把 CSS 的 font-family 屬性套用到 HTML textarea 的語法中，藉此調整文字欄位內的顯示文字字型。

HTML textarea 表單多行文字輸入欄位內文字字型設計範例
<style type="text/css">
#F1{
width:200px;
height:100px;
border:1px #ccc solid;
font-family:新細明體;
}
#F2{
width:200px;
height:100px;
border:1px #ccc solid;
font-family:標楷體;
}
#F3{
width:200px;
height:100px;
border:1px #ccc solid;
font-family:serif font;
}

</style>
<textarea id="F1">這是新細明體的文字</textarea>
<textarea id="F2">這是標楷體的文字</textarea>
<textarea id="F3">這是 serif font 的文字</textarea>
範例的輸出結果
各位讀者應該可以看到我們在範例中所準備的三個 textarea 都透過 CSS 的 font-family 各自設定了不同的文字字型，由左而右分別是新細明體、標楷體以及通用字型 serif font，在這裡要稍微提醒一下各位，font-family 所設定的顯示字型是由瀏覽者的瀏覽器所顯示的，換句話說，必須要瀏覽者的電腦有該字型才能正常顯示，關於 font-family 的詳細用法請參閱我們在《CSS font-family 網頁文字字型設定》篇中所提到的技巧，以免設定了好看的字型卻無法顯示，那就可惜了。

以上就是替 HTML textarea 表單多行文字輸入欄位內文字字型設計的技巧，請各位自己多加練習。

更多 HTML textarea 設計技巧
© Copyright webtech.tw Since 2010