網頁設計 – HTML 文字變化

在上一篇 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 超連結 >>
FacebookGoogle+TwitterLinkedInPinboardPlurkPinterest更多 分享/轉寄 ...
文章標籤: