在上一篇 HTML 文章段落及排版 中，我們有用到 <h1> ~ <h6> 文章標題，我們透過範例的展示結果，也會看到 <h1> ~ <h6> 中的 1 ~ 6 ，剛好是由大標題至小標題，因此標題文字看起來也是由大到小的順序。
但是如果不是文章標題的地方，而我們也想要改變文字的大小或做一些變化，要如何做呢？
HTML 的文字大小
要設定文字顯示的大小，可以透過 <font> 字體標籤的 size 大小屬性來達成。
size 屬性值的範圍是 1 ~ 7 ，因為是字體的大小，所以是數字愈大的話，代表顯示的字體愈大。
文字大小範例：
<html>
<head>
<title>網頁設計教學 HTML - 文字大小</title>
</head>
<body>
字體 size 未指定時，預設為 3 的大小<br><br>
<font size="1">字體 size 為 1 的大小</font><br>
<font size="2">字體 size 為 2 的大小</font><br>
<font size="3">字體 size 為 3 的大小</font><br>
<font size="4">字體 size 為 4 的大小</font><br>
<font size="5">字體 size 為 5 的大小</font><br>
<font size="6">字體 size 為 6 的大小</font><br>
<font size="7">字體 size 為 7 的大小</font>
</body>
</html>
執行結果如下：
字體 size 未指定時，預設為 3 的大小 字體 size 為 1 的大小 字體 size 為 2 的大小 字體 size 為 3 的大小 字體 size 為 4 的大小 字體 size 為 5 的大小 字體 size 為 6 的大小 字體 size 為 7 的大小
HTML 的文字顏色
要設定文字的顏色，也可以透過 <font> 字體標籤的另一個 color 顏色屬性來達成。
<html>
<head>
<title>網頁設計教學 HTML - 文字顏色</title>
</head>
<body>
網頁文字<font color="blue">「藍色」</font><br>
網頁文字<font color="red">「紅色」</font><br>
網頁文字<font color="green">「綠色」</font><br>
網頁文字<font color="#cc0055">「自訂 RGB 的 #cc0055 顏色」</font><br>
網頁文字<font color="#5555cc">「自訂 RGB 的 #5555cc 顏色」</font>
</body>
</html>
執行結果如下：
網頁文字「藍色」 網頁文字「紅色」 網頁文字「綠色」 網頁文字「自訂 RGB 的 #cc0055 顏色」 網頁文字「自訂 RGB 的 #5555cc 顏色」
若想進一步瞭解 color 顏色屬性如何顯示自訂的 RGB 顏色，可參考這篇： RGB 三原色 。
HTML 的字型
要設定文字的字型，是透過 <font> 字體標籤的另一個 face 屬性來達成。
<html>
<head>
<title>網頁設計教學 HTML - 字型</title>
</head>
<body>
我是<font face="新細明體">「新細明體 Font」</font><br>
我是<font face="細明體">「細明體 Font」</font><br>
我是<font face="標楷體">「標楷體 Font」</font><br>
我是<font face="微軟正黑體">「微軟正黑體 Font」</font><br>
我是<font face="Times New Roman">「Times New Roman」</font><br>
我是<font face="Arial">「Arial」</font><br>
我是<font face="Tahoma">「Tahoma」</font>
</body>
</html>
執行結果如下：
我是「新細明體 Font」 我是「細明體 Font」 我是「標楷體 Font」 我是「微軟正黑體 Font」 我是「Times New Roman」 我是「Arial」 我是「Tahoma」
不知道上面的執行結果您是否看得出來字型的變化呢？這裡要請您注意一件事，雖然我們可以由 <font> 字體標籤的 face 屬性來設定字型，但是也必須要看這個網頁的人電腦中有這個字型，他才能看到字型變化的結果。
例如說，也許您的電腦內有安裝「隸書體」、「仿宋體」…等字型，您透過 face 屬性設定後，執行也看到效果了，但其它人的電腦未必安裝有這些字型，當他們開始這個網頁時，您設定的「隸書體」在他們的電腦上看到的中文只會是電腦預設的「新細明體」。所以要注意喔，網頁設計時，最好使用大家電腦應該都有的字型，否則一些特殊的字型別人並不一定看得出那個效果喔！
HTML 的文字粗體、斜體、加底線、刪除線
文字粗體可使用 <b> 標籤來達成，其中 b 為英文 bold 之簡寫，代表粗體或黑體之意。斜體可使用 <i> 標籤，其中 i 為英文 italic 的簡寫，代表斜體之意。加底線可以用 <u> 標籤，其中 u 為英文 underline 的簡寫，為底線之意。加刪除線可以用 <s> 標籤，其中 s 為英文 strike 的簡寫，為底線之意。
<html>
<head>
<title>網頁設計教學 HTML - 文字粗體、斜體、加底線、刪除線</title>
</head>
<body>
我是<b>「粗體字」</b><br>
我是<i>「斜體字」</i><br>
我是<u>「文字加底線」</u><br>
我是<s>「文字加刪除線」</s><br>
我是<i><u>「斜體字加底線」</u></i>
</body>
</html>
執行結果如下：
我是「粗體字」 我是「斜體字」 我是「文字加底線」 我是「文字加刪除線」我是「斜體字加底線」
文字粗體還有另一個 <strong> 標籤可以達成，它代表重點的意思。而斜體字也有另一個 <em> 標籤可以用，其中 em 為英文 emphasize 的簡稱，為強調之意。
對於一般在觀看網頁的人來說， <strong> 、 <em> 標籤與 <b> 、 <i> 標籤的顯示結果是一樣的。不過對於 搜尋引擎 而言， <b> 、 <i> 標籤只是單純當做文字顯示時的變化，而 <strong> 、 <em> 則除了文字變化之外，還有「重點、強調」之意，對於網站有在做 SEO 搜尋優化 的人而言，效果是會一些些不同的。
<html>
<head>
<title>網頁設計教學 HTML - 重點文字、強調文字</title>
</head>
<body>
我是<strong>「重點文字，粗體」</strong><br>
我是<em>「強調文字，斜體」</em>
</body>
</html>
執行結果如下：
我是「重點文字，粗體」 我是「強調文字，斜體」
HTML 的上標字與下標字
有時我們會希望在網頁上能夠列出簡單的公式、化學式，或是標記一下註解編號，這時我們可能會用到上標字與下標字。
上標文字或符號，英文是 superscript ，下標文字或符號，英文是 subscript ，而在網頁 HTML 中即是 <sup> 與 <sub> 標籤。
<html>
<head>
<title>網頁設計教學 HTML - 上標字、下標字</title>
</head>
<body>
數學 x 的 10 次方，是以 x<sup>10</sup> 來表示<br>
水的化學式是 H<sub>2</sub>O
</body>
</html>
執行結果如下：
數學 x 的 10 次方，是以 x10 來表示 水的化學式是 H2O
| << 上一篇： HTML 文章段落及排版 | [ HTML 教學目錄 ] | 下一篇： HTML 超連結 >> |
※ 本文歡迎大家在網頁中連結或加入我的最愛，但複製、引用、轉載或做其它商業用途者，請註明此原文出處及原始連結，未註明出處者必究。
請問在font的標籤裡要更改顏色
例如:
上方的red不加”” 也會顯示出他的顏色
請問加跟不加會有什麼影響嗎?
您好，正確的語法是要加 “” 的。至於不加也會顯示，那是因為你所使用的瀏覽器會添加一些容錯能力。
但除了常用瀏覽器之外，還有各式各樣的瀏覽器，不見得每個瀏覽器都能正常顯示。因此，應養成採用正確語法的好習慣。