第 3 章 文字樣式的變化
本章提要 3-1 設定字體的大小、字型與顏色 3-2 設定字體的格式變化 3-3 可呈現特殊效果的文字標籤 3-4 特殊的標籤、字元與符號
3-1 設定字體的大小、字型與顏色 在 HTML 語法中控制文字顯示的標籤非常多, 最常用的大概就是與字型相關的部分了, 除了可以調整字體的大小, 也可以設定使用何種字型, 並指定文字的顏色。
3-1-1 設定字體大小－<font size> 在 HTML 中專門用來處理字型的標籤是 <font>, 這個標籤有許多屬性, 接下來將說明關於字體大小及其相關的設定。 雖然我們可以設定網頁文件中的字體大小, 不過能設定的只是『相對大小』, 而非『絕對』大小。字的絕對大小, 一方面取決於螢幕解析度, 另一方面也和瀏覽器預設的字體大小有關。例如：開啟 IE 執行『檢視/字型』命令, 可選擇不同大小的預設字體；而文件中的各種標籤, 便是以此為基準, 來設定文字的大小。
直接指定字體大小 <font> 標籤中用來設定字體大小的屬性為 size, 其語法為:
直接指定字體大小 size_no 可用的數字為 1 至 7, 數值愈大字也愈大, 預設的數值為 3。例如:
直接指定字體大小 TIP:<font size=?> 與 <h?> 兩者使用的數字與顯示字體大小的關係剛好相反,前者數字愈大字體愈大, 後者數字愈大字體愈小。 如果未在最後加上 </ font> 或是用 <font size=“3"> 回復原來大小,則最後一個 <font size=...> 的設定效力將持續影響後面文字的顯示,一直到再次遇到 <font size=?> 或 </font> 標籤為止。
指定字體的相對大小 除了可直接在 size 屬性上指定一固定的數值外, 也可使用加減數值的方式來指定, 例如上頁的例子可改成：
指定字體的相對大小 所有的加或減都是以預設的字體大小 3 做為運算的基準, 例如 size="+2" 就相當是size="5" (3+2), 而 -1 就是變成大小為 2 的字形 (3-1)。 若將文件各部分使用的字體大小都以相對方式設定好, 可以在維持整篇文字的比例關係下, 同時對整篇文字做放大或縮小的效果。這時使用加減的設定就比較方便, 因為不需要一個個修改 <font size=...> 的內容, 只要修改預設的字體大小即可。
3-1-2 更改預設字體大小 －<basefont size> 用來更改預設字體大小的標籤是 <basefont size="size_no">, 同樣可指定 1 至 7 之間的數字：
3-1-2 更改預設字體大小 －<basefont size> 雖然我們可控制字體大小, 請注意, 這些設定都只是相對性的, 而非絕對性的。亦即可以設定這幾個字比那幾個字大或小多少, 但所有的字顯示出來的大小, 則是取決於瀏覽器的設定值。 像 IE 的『檢視/字型』命令可調整網頁中的字體大小, 使用者可任意調整, 不受 HTML 語法的控制。
Headings 與 font 的差異 第 2 章介紹的 Headings (<h?>) 標籤及 <font> 都有改變字體大小的功用, 我們將這兩組標籤的主要差異列於下面的表格中:
Headings 與 font 的差異 <h?> 標籤有 6 種字體大小, 分別是 h1〜h6, <font> 標籤則有 7 種字體尺寸, 以 size 屬性來設定。有趣的是Headings 標籤是數字越大則字體越小, 而 <font> 標籤則是數字越大字體尺寸也就越大。 除了 <font> 7 號字以外, <h1> 字體大小相當於<font size=6> 的字體大小, 而 <h2> 字體大小則相當於 <font size=5> 的字體大小, <h3> 字體大小相當於<font size=4> 的字體...。
Headings 與 font 的差異 同樣的一段文章, 以 <h1> 和<font size=6> 兩組標籤分別比較時, 兩者的字體大小是一樣的, 但使用 <h1> 標籤的字體會有明顯的加粗效果。 此外, 使用 <h?> 這組標籤時, 在 <h?>...</h?> 之間的文字都會自成一行, 或者說這些文字算是自成一個段落。
Headings 與 font 的差異 而 <font size=?>...</font> 則可用來修飾一行或一段內容中的一小段文字, 所以不會有換行的情形, 在同一行中用不同的size 屬性設定, 這些不同尺寸的字體還是會出現在同一行。 最後還有一點不同, 就是 <h?> 文字的大小並不會受 <basefont> 的影響。
3-1-3 指定文字字型－<font face>
3-1-3 指定文字字型－<font face> 字型名稱至少要指定一個, 為預防使用者的電腦上未安裝指定的字型, 可以在後面加上第二個字型名稱、第三個字型名稱..., 名稱之間以逗號做區隔。 如此, 瀏覽器未找到第一個字型時, 會依序尋找第二個、第三個...來代替。例如：
3-1-3 指定文字字型－<font face>
3-1-4 指定字體的顏色－<font color> <font> 標籤的 color 屬性可以設定文字的顏色, 不過僅限包含在 <font>、</font> 標籤之中的文字。如果要設定所有文字的顏色, 則適合用 <body> 標籤的 text 屬性。<font color> 的使用方法如下：
3-1-4 指定字體的顏色－<font color> 我們來看看以下的例子:
3-1-4 指定字體的顏色－<font color> 製作網頁時所使用的顏色表示法有兩種, 一是文字表示法, 也就是上例所使用的方法(以 "red" 表示紅色)；而另一種則是十六進位表示法, 例如：
3-1-4 指定字體的顏色－<font color> 上例的 “#ff0000” 是紅色的十六進位表示法, 其意思是： 上述共 6 碼的十六進位數值, 代表 RGB 混合後所得到的顏色。使用十六進位表示法的好處在於, 對顏色的變化可以進行很細微的調整。
3-1-5 設定本文文字的顏色 －<body text> <body> 標籤是用來標示本文, 此處要介紹的是利用 <body> 標籤的 text 屬性, 來設定本文文字的顏色。其使用方法如下：
3-1-5 設定本文文字的顏色 －<body text>
3-1-5 設定本文文字的顏色 －<body text>
3-1-5 設定本文文字的顏色 －<body text> 上例使用藍色當成背景, 若使用預設的黑色文字, 則會變得難以閱讀。改成白色的文字後, 就顯得清楚多了。因此, 適當地調整背景和文字的配色, 也可以讓網頁變得更加出色。 TIP:text 屬性是對全部的本文做設定, 若是需要將針對個別的段落變換顏色, 則請使用<font color> 標籤來設定。
3-2 設定字體的格式變化 熟悉文書處理的讀者, 一定對粗體、斜體...等字體變化相當熟悉吧。運用這些字體變化, 可以幫我們強化文字的語氣, 或凸顯希望讀者注意的主題等。接下來就來看看有哪些標籤可以設定字體的變化。
3-2-1 粗體字－<b> 利用 <b> 標籤可以表現粗體字 (Boldface) 效果, 讓想要凸顯的文字很容易被注意到。 <b> 標籤的使用方式如下：
3-2-1 粗體字－<b> 凡是放在 <b>...</b> 標籤之間的文字, 都會加上『粗體字』的效果, 可用於加強語氣的字句上, 例如： 使用時不要忘了在最後一個粗體字後面加上結束標籤 </b>, 否則後面所有的字就都會變成粗體字了。
3-2-2 斜體字－<i> 利用 <i> 標籤可以表現斜體字 (Italics) 效果, 以強調該段文字。<i> 標籤的使用方式如下： <i> 標籤也可以與 <b> 合併使用, 做出 『粗體 + 斜體』的效果, 例如：
3-2-3 文字加底線－<u> 利用 <u> 標籤可以將文字加上底線 (Underline), 通常會配合超連結使用, 可以讓瀏覽網頁的人很容易明白該段文字有超連結。<u> 標籤的使用方式如下：
3-2-3 文字加底線－<u> 同樣地, 也可以將此標籤與 <b> 及 <i> 合併使用。例如：
3-2-4 文字刪除線－<strike> 當我們修改或更新了文章的內容, 可以利用 <strike> 標籤標示文字刪除線, 指出修正或更新的地方。<strike> 標籤的使用方式如下：
3-2-4 文字刪除線－<strike> <s> 標籤也可以與 <b>、<i>、<u> 等標籤合併使用。例如： 不過 <strike> 標籤不建議和 <u> 標籤合併使用, 否則文字同時有刪除線和底線, 會使字體看起來太過混亂。
3-3 可呈現特殊效果的文字標籤 3-3-1 上標字－< sup > 3-3-2 下標字－< sub > 3-3-3 跑馬燈－< marquee >
3-3-1 上標字－<sup> 上標文字 (Superscript) 會以略高於同一行文字的對齊方式排列, 同時字型略小於同一行文字。我們來看以下的例子：
3-3-1 上標字－<sup> 一般最常使用到上標字的, 就是數學算式了： 使用 <sup> 標籤時, 若加上其他字體格式標籤 (如 <b> 粗體字、<i> 斜體字等) 仍有效果。
3-3-2 下標字－<sub> 相對於 <sup> 標籤, 利用 <sub> 標籤則可以做出下標字 (Subscript)。下標文字會以略低於同一行文字的對齊方式排列, 同時字型略小於同一行文字。請看下列的例子：
3-3-3 跑馬燈－<marquee> 很多人利用 JavaScript 來做跑馬燈, 讓一串文字能由右至左循環地捲動, 不過在 IE 支援的擴充標籤中, 就有一項是用來在文件中顯示跑馬燈, 那就是 <marquee> 標籤。
3-3-3 跑馬燈－<marquee>
3-3-3 跑馬燈－<marquee> 這樣子就能使『9/20 新增波斯菊系列攝影集』這個句子由視窗的最右邊開始向左邊移動, 消失後又會重覆地顯示。 <marquee> 標籤還有很多屬性可使用, 以下先分別介紹各屬性的作用, 最後再以幾個實例看看其效果：
<marquee>標籤屬性 <marquee behavior="屬性值"> 設定捲動的效果, 有 scroll、slide 及 alternate 三個屬性值可設定。預設值為 scroll, 即一般的捲動效果, 從一個方向進來, 另一個方向出去；slide 表示文字捲進來碰到邊界後, 就停下來不動了; alternate 的效果最有趣, 它會讓文字在限定的範圍中左右兩邊彈來彈去。
<marquee>標籤屬性 <marquee direction="屬性值"> 設定文字捲動的方向, 預設是由右到左的 left, 如果您要做由左跑到右的反方向跑馬燈, 則可設定成 right。 <marquee height="?" width="?"> 分別用來設定跑馬燈的高與寬, 可以單獨指定其一項, 也可以兩項都指定。"?" 可以直接輸入圖點數 (heigth="50" 表示跑馬燈有五十個圖點高), 或是輸入跑馬燈的區域在視窗中所佔的畫面比例 (如 width="30%")。
<marquee>標籤屬性 <marquee loop=“?”> 設定跑馬燈捲動的次數, 預設值是 infinite, 表示不限定次數。您可以指定其他整數來設定跑的次數。 <marquee scrollamount="?" scrolldelay="?"> 這兩個屬性分別是用來設定跑馬燈捲動時每次移動的 『步伐』 大小(scrollamount), 以及需要多久移動一次的時間間隔(scrolldelay)。
<marquee>標籤屬性 步伐設大一點, 例如 scrollamount=“50” (仍是以圖點為單位), 則跑馬燈文字會一下子就從右邊 『跳』 到左邊了；至於時間間隔則是以毫秒(ms)為單位。例如scrolldelay=500, 便是每 0.5 秒移動一次跑馬燈的文字。您可嘗試調整這兩個屬性值, 做出有趣的跑馬燈。 <marquee bgcolor=" 顏色"> 這個屬性可以為跑馬燈設定背景顏色。
3-3-3 跑馬燈－<marquee> 以下是一個使用 <marqee> 標籤的例子：
3-3-3 跑馬燈－<marquee> 在第一個跑馬燈中, 除了使用 width 指定其寬度外, 在其前後也加上了 <center> 標籤, 使得顯示時跑馬燈只出現在畫面中間的一部分, 這也是常見的使用方式。如果文字比較多的時候, 可以將 width 設寬一點, 效果會比較好。 後面三個跑馬燈都是嘗試設定不同屬性時的效果, 您可以加以修改看看能否做出更令自己滿意的效果。不過建議您在同一個頁面不要使用太多跑馬燈, 否則畫面看起來會像車水馬龍的大街一樣混亂。
3-4 特殊的標籤、字元與符號 編輯網頁時, 有些常用的樣式, 若每次都要重新設定格式實在有點麻煩；此外, 偶而會遇到需要運用特殊的字元 (如聲明版權的 (c))、符號 (如 X < Y 的表示式) 等。雖然這樣的機會不高, 但萬一碰上時, 還真是令人頭痛。本節就要介紹如何使用這些特殊的字元、符號等。
3-4-1 具有特殊含意的標籤 在英文的文書處理中, 某些常用的註標、強調、程式碼等內容, 習慣使用某些特殊的樣式或字體來表示或強調其顯示效果, 久而久之變成固定模式, 我們稱這些為『具有特殊含意的標籤』。 利用這類標籤可以方便地套用各種具有象微意義的樣式或字體, 不需要再花費心思調整各種屬性了。
3-4-1 具有特殊含意的標籤 這些標籤的用法和字型樣式的標籤都相同, 在此就不再一一詳述, 只以下表列出這些標籤：
3-4-1 具有特殊含意的標籤
3-4-1 具有特殊含意的標籤 現在我們把上表的標籤集合成以下的範例：
3-4-1 具有特殊含意的標籤 請注意, 如果您變更瀏覽器的預設字型時, 各標籤實際的顯示效果也會有些許差異。
3-4-2 附屬說明文字 相信大家在成長過程中, 都是用注音符號來學習國字的唸法。在某些情況下, 像是要用到一般人都不太會唸的罕用字, 或是寫給識字不多的小朋友們看的文章時, 我們往往需要在字的旁邊加上注音, 但是要把這種用法搬到 HTML 文件中, 就有些累人了。
3-4-2 附屬說明文字 就以目前本書有提到的標籤而言, 可能有人會想到將注音和文字分兩行輸入, 並將注音的字體設小一點, 或許有人想乾脆做成圖片再放到網頁上, 效果可能比較好。不過 IE 支援一個標籤<ruby>, 讓我們可以輕鬆解決這類問題。
3-4-2 附屬說明文字 <ruby> 標籤和之前介紹的標籤略有不同, 在使用時需搭配另一個輔助用的標籤 <rt>。讓我們來看一個實例：
3-4-3 在 HTML 文件中顯示符號 學了這麼多標籤後, 相信您已相當習慣 <> 這一對符號。您是否想過, 萬一要在 HTML 文件顯示這 2 個符號時該怎麼辦？我們先來看一個例子：
3-4-3 在 HTML 文件中顯示符號 顯示結果竟然是在第一個大於符號之後的文字都不見了, 因為瀏覽器讀到 "<" 符號時, 以為遇到的是一個標籤, 就將其後的內容隱藏起來, 並且嚐試去讀取對應的 ">" 符號, 沒想到我們只是單純地想顯示這串簡單的文字而已。 類似這樣的情形不少, 問題在於某些特殊字元已經被 HTML 拿來當作標籤使用, 因此造成瀏覽器對網頁內容解讀錯誤。
3-4-3 在 HTML 文件中顯示符號 在 HTML 文件中, 必須使用特殊的字串來表示這些符號。例如要顯示 < 或 > 符號都要先將它們替換成下表所示的特殊語法才可以：
3-4-3 在 HTML 文件中顯示符號 像剛剛的例子改寫成這個樣子就能正常顯示了：
3-4-4 在文件中顯示特殊字元 除了剛剛介紹的 4 個符號要使用特殊的顯示方法外, 其實有許多特殊符號和字元, 也必須使用相同的技巧才能顯示在瀏覽器上。例如歐洲語文和特殊文字等, 這些無法使用鍵盤輸入的文字及符號, 也都可用兩組 "&" 開頭的特定語法來代替。
3-4-4 在文件中顯示特殊字元 這兩組語法, 其中一組是用字元的名稱來表示, 例如要顯示 Å 上面加個圓圈 (ring) 的 A 叫做 Aring, 其用法是 Å, 德文中的 Ü 母音變化 (umlaut) 要用 Ü 等；另一組則是使用各字元符號在 ISO-8859-1 標準中的編碼, 例如 Å 是 Å, 則是 Ü。
3-4-4 在文件中顯示特殊字元 下表列出幾個特殊符號使用這 2 組的語法的表法：
3-4-4 在文件中顯示特殊字元
3-4-4 在文件中顯示特殊字元 上頁表格僅列出部份字元與符號, 若需完整的列表, 可至 http://www.talisman.org/iso8859-1.html 查閱。 使用名稱表示法時, 英文字母的大小寫代表不同的符號或字元, 請您注意。
3-4-4 在文件中顯示特殊字元 以下就是個簡單的範例： 除了上述的方法外, 也可以將這些特殊文字與符號都改用中文字型的全形字。如果您的網頁是純中文的, 那不妨使用這種方法, 也可以省下一些功夫。