设定字体的大小字型与颜色.ppt

第 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 在 font 標籤中, face 這個屬性可以設定文字的字型。但是可以設定並不表示就能正確顯示出來, 還須視用戶端的電腦中是否有安裝該網頁指定的字型。其語法如下： 3-1-3 指定文字字型－font