HTML font tag 網頁文字標籤 - HTML 網頁設計筆記

HTML font tag 網頁文字標籤的功能很多，都與網頁文字有關，例如修改網頁文字的大小、顏色以及字型都可以使用 font tag 中的功能來做，font tag 是基本的 HTML 設計語法，受到廣大的瀏覽器支援，隨著網頁技術的進步，舉凡 font tag 的各種功能也幾乎都有 CSS 屬性可以代替，但那並非本篇文章的重點，我們將著重於如何使用 HTML font tag 以及 font tag 的各種可用功能，先來看基本的語法規則。

HTML font tag 語法

HTML 的 font tag 有好幾個可以使用的功能，例如調整文字顏色的 color、調整文字大小的 size 以及調整文字字型的 face，最後一個 style 則是來標示 CSS 樣式的，以上幾個項目都是選用項目，有需要再使用即可，我們接著把這幾個功能套用至範例中看效果如何？

HTML font tag 範例一、基本 HTML 寫法

範例的視覺效果

紅色的文字藍色的文字較小的文字較大的文字標楷體字型的文字微軟正黑體字型的文字

我們在範例中先使用了 font tag 的 color 功能設計出紅色與藍色的文字，再來用 size 功能設計出比較大的文字，最後用 face 功能設定文字的字型，雖然我們是把每種功能一次套用一種，實際上 font tag 允許一次使用多個不同的功能來設定文字。

以下幾則為常用功能介紹

HTML font tag 範例二、與 CSS 的比較

範例的視覺效果

紅色的微軟正黑體大字藍色的微軟正黑體大字

由於 CSS 技術的普及，越來越多網頁設計師採用 CSS 的屬性取代傳統 HTML font tag 中的各種功能，主要原因是 CSS 有許多設計與管理上的優勢是傳統 HTML font tag 沒有的，範例二呈現的是如何用 CSS 替代語法做出與傳統 HTML font tag 相同的功能，採用 CSS 的部份無論是用 font 標籤還是用 span 標籤，把要處理的文字包起來後，都可以下 style 的樣式宣告。

CSS 的 color 屬性效果等同於 HTML font tag 的 color 功能。
CSS 的 font-family 屬性效果等同於 HTML font tag 的 face 功能。
CSS 的 font-size 屬性效果等同於 HTML font tag 的 size 功能。

更多網頁文字設計

修改 HTML Table 表格文字大小

關於 CSS 的文字設計