HTML font 文字

HTML font 對文字的設定有顏色(color)、大小(size)以及字型(face),標準的 HTML 文字標籤是由 <font> 開始,以及 </font> 標籤結束,兩個標籤中的文字可以做不同的變化,在 HTML4.1 以前的版本,<font></font> 標籤是標準的文字設計語法,但到 HTML5 之後,這些 <font> 標籤的屬性已經不支援,取而代之的是透過 CSS 的語法設計文字,無論是字型、文字大小或顏色都可以在 CSS 中找到新的設計方式,以下先就原本的 HTML font 各項屬性做介紹,並附上 CSS 的替代方案。

HTML font 文字基本語法

<font 文字屬性>顯示的文字</font>


文字屬性是必須的,可以只寫三種屬性的其中一種,例如只要修改顏色就寫 color="要呈現的顏色",也可以同時把三種屬性寫在一起,例如要修改文字的顏色、大小以及顯示字型,僅需用一個 <font> 標籤就能完成,以下是三種重要屬性表。

HTML font 文字屬性表
屬性屬性值與說明語法CSS 替代方案
color文字顏色<font color="色碼">顏色</font>CSS color 文字顏色
size文字大小<font size="1~7">大小</font>CSS font-size 文字大小
face文字字型<font face="字型">字型</font>CSS font-family 字型

以上三個屬性雖然用法簡單,但在 HTML5 都不支援,建議使用 CSS 替代方案。

HTML font 文字範例
屬性值與說明語法呈現效果
文字顏色<font color="red">紅色</font>
<font color="blue">藍色</font>
<font color="green">綠色</font>
紅色
藍色
綠色
文字大小<font size="1">小字</font>
<font size="4">一般</font>
<font size="6">大字</font>
小字
一般
大字
文字字型<font face="serif">serif 字型</font>
<font face="DFKai-sb">標楷體</font>
<font face="monospace">monospace 字型</font>
serif 字型
標楷體
monospace 字型

文字顏色的屬性值除了可以寫顏色的英文之外,也可以寫《色碼表》上的十六進位色碼或 RGB 色碼,文字大小則用數字表示,數字範圍從 1~7,數字越大代表文字越大,字型的部分則有許多種常用字體可以使用,各種字型名稱請參閱:CSS font-family 字型。假設要把三個屬性都寫在一起,可以寫成『<font face="字型" size="大小" color="顏色">範例文字</font>』這樣。

其他 HTML font 特效
特效語法呈現效果
<b>粗體字</b>粗體字
<I>斜體字</I>斜體字
<u>文字加底線</u>文字加底線
<spu>文字上標</spu>文字上標
<sub>文字下標</sbu>文字下標
<em>強調文字</em>強調文字
<strong>加強文字</strong>加強文字
<code>原始碼字串</code>
原始碼字串

其實 HTML font 的特效還有很多,但隨著瀏覽器與 HTML 的進步,許多原本常用的特效都已經被 CSS 所取代,特殊的效果不一定獲得瀏覽器的支援,設計師在使用這些文字特效之前,建議多找幾個瀏覽器測試看是否能夠正常顯示,CSS 替代方案請參閱:text-decoration

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