HTML font tag 文字標籤 - WebTech 網頁設計教學站

HTML font tag 文字標籤是最傳統的HTML 網頁設計的文字設定功能，透過 的諸多屬性如size、color、face 來控制文字的大小尺寸、顏色以及字型，優點是簡單並受到 ... WEBTECH網頁設計教學站 首頁 PHP CSS HTML JavaScript GIMP Linux OpenOffice 瀏覽器 其它 Home › HTML › HTMLfonttag文字標籤 HTMLfonttag文字標籤 HTMLfonttag文字標籤是最傳統的HTML網頁設計的文字設定功能，透過的諸多屬性如size、color、face來控制文字的大小尺寸、顏色以及字型，優點是簡單並受到所有主流的瀏覽器支援，儘管現階段新一代的CSS設計漸漸取代這些fonttag的基本功能，不過還是有很多HTML網頁設計採用fonttag的各種屬性，本篇將這幾種常見的fonttag功能寫成範例並附上CSS的替代語法讓各位讀者朋友們參考，最後還有利用其他HTMLtag設計不同的文字特效範例，先來看看fonttag的基本語法規則。

HTMLfonttag文字標籤語法文字HTMLfonttag的標準用法是由標籤開頭以及標籤做結尾，兩個標籤之間就是要顯示的文字，在開頭的標籤內有三個常用到的屬性，分別為控制文字顏色的color、控制文字大小的size以及控制文字字型的face，這幾個font屬性都是選擇項目，需要用到再寫即可，網頁文字的大多數基本變化就是靠這幾個font屬性來處理，以下幾個範例將呈現各種屬性的實際效果。

HTMLfonttag文字標籤範例一、利用fontsize調整文字大小大型字體中型字體小型字體範例輸出效果大型字體中型字體小型字體HTMLfontsize的屬性值用數字表示，字體大小的數字範圍從1~7，最小的是fontsize="1"，而最大的則是fontsize="7"，在這7個數字間變化文字尺寸，如果要更大的字體怎麼做？答案是採用CSS的font-size屬性。

深入研究：HTMLfontsize網頁文字大小設計、CSS透過font-size屬性設定文字大小HTMLfonttag文字標籤範例二、利用fontcolor調整文字顏色紅色橘色藍色範例輸出效果紅色橘色藍色範例二設計了三個不同顏色文字，採用的fontcolor屬性值都是顏色的英文單字，除此之外，HTMLfonttag的color屬性也接受十六進位的色碼以及RGB的色碼表示法，十六進位色碼請參考《色碼表》內容，HTMLfontcolor的CSS替代語法則為color屬性。

深入研究：HTMLfontcolor文字顏色設計、CSScolor文字顏色設計HTMLfonttag文字標籤範例三、利用fontface調整文字字型標楷體新細明體微軟正黑體serif範例輸出效果標楷體新細明體微軟正黑體serif隨著網際網路的發展，目前全世界的網頁文字字型至少有數千種以上，絕對不局限於常見的新細明體、標楷體、微軟正黑體...這些而已，網頁設計師早期都是採用HTML的fontface屬性來＂設定＂文字的字型，將想要呈現的字型套用到文字上，fontface是一個標準的字型套用語法，不過在HTML5以上的版本建議以CSS為設計基礎，因為fontface的瀏覽器支援並不理想，fontface的CSS替代語法是font-family，優點是可以設定多組不同的字型讓瀏覽器自己挑選。

深入研究：HTMLfontface網頁文字的字型設定、CSSfont-family網頁文字字型設定HTMLfonttag文字標籤範例四、其他常見文字特效粗體的文字斜體字文字加底線文字上標<sub>文字下標強調文字加強文字範例輸出效果粗體的文字斜體字文字加底線文字上標文字下標強調文字加強文字以上文字常見特效參考資訊來自Wibibi網站：HTMLfont文字範例四所呈現的是常用到的網頁文字特效，這些特效在網頁文章中使用機率都蠻高的，而且這些屬性都不需要用HTMLfonttag來標示就能直接套用到文字上，部份效果有CSS的替代語法可以使用。

斜體字的CSS替代語法：CSSfont-style屬性文字加底線、上標或下標：CSStext-decoration屬性以上範例一至範例三的fontsize、fontcolor以及fontface都是傳統的HTML網頁文字設計標準語法，隨著HTML本身的進化與CSS設計的普及，建議新的網頁設計盡量以CSS的語法為主，本篇關於HTMLfonttag的介紹就先寫到這邊。

您可能會想看 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 設計具有超連結效果的HTMLolli自動排序項目清單 設計具有超連結效果的HTMLulli項目清單 HTMLolli列表(數字編號項目清單) HTMLulli列表(項目清單) HTMLtextarea表單多行文字輸入欄位背景圖片設計 HTMLtextarea表單多行文字輸入欄位背景顏色設計 即時熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 今日熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 ©Copyrightwebtech.twSince2010</sub>