HTML font tag 文字標籤

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

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

HTML font tag 文字標籤範例一、利用 font size 調整文字大小
<font size="6">大型字體</font> <font size="3">中型字體</font> <font size="1">小型字體</font>
範例輸出效果
大型字體 中型字體 小型字體
HTML font size 的屬性值用數字表示,字體大小的數字範圍從 1~7,最小的是 font size="1",而最大的則是 font size="7",在這 7 個數字間變化文字尺寸,如果要更大的字體怎麼做?答案是採用 CSSfont-size 屬性。

深入研究:HTML font size 網頁文字大小設計CSS 透過 font-size 屬性設定文字大小

HTML font tag 文字標籤範例二、利用 font color 調整文字顏色
<font color="red">紅色</font> <font color="orange">橘色</font> <font color="blue">藍色</font>
範例輸出效果
紅色 橘色 藍色
範例二設計了三個不同顏色文字,採用的 font color 屬性值都是顏色的英文單字,除此之外,HTML font tag 的 color 屬性也接受十六進位的色碼以及 RGB 的色碼表示法,十六進位色碼請參考《色碼表》內容,HTML font color 的 CSS 替代語法則為 color 屬性。

深入研究:HTML font color 文字顏色設計CSS color 文字顏色設計

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

深入研究:HTML font face 網頁文字的字型設定CSS font-family 網頁文字字型設定

HTML font tag 文字標籤範例四、其他常見文字特效
<b>粗體的文字</b>
<I>斜體字</I>
<u>文字加底線</u>
<spu>文字上標</spu>
<sub>文字下標</sbu>
<em>強調文字</em>
<strong>加強文字</strong>
範例輸出效果
粗體的文字
斜體字
文字加底線
文字上標
文字下標
強調文字
加強文字
以上文字常見特效參考資訊來自 Wibibi 網站:HTML font 文字
範例四所呈現的是常用到的網頁文字特效,這些特效在網頁文章中使用機率都蠻高的,而且這些屬性都不需要用 HTML font tag 來標示就能直接套用到文字上,部份效果有 CSS 的替代語法可以使用。
以上範例一至範例三的 font size、font color 以及 font face 都是傳統的 HTML 網頁文字設計標準語法,隨著 HTML 本身的進化與 CSS 設計的普及,建議新的網頁設計盡量以 CSS 的語法為主,本篇關於 HTML font tag 的介紹就先寫到這邊。
© Copyright webtech.tw Since 2010