Plurk FaceBook Twitter 收進你的MyShare個人書籤 MyShare
  顯示內嵌語法

第三階段【網頁製作系列報導】電子報【進階網路運用】

進階網路運用

第八篇
令人迷失方向的網頁製作疑問之四
網頁字體大小問題
適合程度： 初學者 一般程度 以上均宜
壹、我該如何選用網頁字體大小：
⊕如何配合不同條件、狀況、需求選用網頁字體大小，這也是網頁設計者所面臨的常見困惑問題之一。
⊕有些人認為較小的字體能讓網頁看起來更漂亮，並且給每個網頁中的實際內容提供更多位置與空間。
⊕但是，字體太小有時也會導致閱讀困難；反之字體太大，看起來也會不夠精緻；如何取捨確實難為。
⊕除此，這個問題又會因為客戶端使用者的螢幕尺寸、解析度、作業系統、瀏覽器等不同平臺而變化。
⊕理論上一個好的網站設計，應該可以針對不同條件、狀況、需求，讓每一個訪問者看起來舒服漂亮。
⊕將網頁字體、字型或顏色等製作成一張張圖片，就可以適用任何電腦平台，問題是網頁太大又麻煩。
⊕這個問題將是初學者一定會面臨的困惑，也是本次主題要探討的令人迷失方向的網頁製作疑問之四。
⊕以下報導除了蒐集網路上現有資訊外，再加上個人經驗，提供資訊給各位參考，希望對您有所助益。

貳、處理網頁字體大小的 HTML 語法：
⊕HTML 對於處理網頁字體大小的語法(標籤)很簡單，就是使用 <FONT SIZE="N"> 字體標籤 </FONT>。
SIZE="N" ，其 N 值為 1 ~ 7 ，1 是最小、 7 為最大、 3 為正常大小值(預設值)。
用 <FONT SIZE="+1"> 語法可以將文字增大一號，反之 -1 可以將文字縮小一號。
⊕除此 <Hn> 標題字標籤 </Hn> ，也可以指定字體大小、加粗及自動段行功能。
⊕自串接樣式表 (CSS) 被廣泛使用後，算是對處理網頁字體大小設置問題的最好辦法。
因為 CSS 靈活、容易維護，強力推薦使用 CSS 來替代 HTML 中 <font> 的標籤。

⊕CSS 延伸閱讀：網頁研習室 Go 。

參、處理網頁字體大小的 CSS(Cascading Style Sheet) 語法：
許多網站為了固定版面編排，都會使用 CSS 語法設定字體大小，讓瀏覽者無法使用檢視字型，來更動大小。
備註：本方法僅適用 IE 類型的瀏覽器，對 Mozilla Firefox 瀏覽器無效。
網絡上常見到的中文字體大小為 9 pt (正常大小為 12 pt)，針對 CSS 語法計有三種設定方法：
01.行內式(Inlin Style)排版樣式(直接定義在原有的 HTML 標籤內)：
使用 <span style="font-size:9pt"> 顯示文字 </span> 設定。
備註：這種方法非常麻煩，你必須為每段文字都設定大小，與使用 HTML 語法沒有多大差異。
02.內崁式(Embedding Style)排版樣式：(定義在 HEAD 標籤內)：
CSS 原屬於 DHTML 的一個組成部分，它可以定義整個頁面的字體顯示風格和大小，是較為簡便的方法。
例如：設定整個頁面文字大小為 9 pt，只要將下面這段代碼加入 HTML 代碼的 <head> 和 </head> 之間。
<style type="text/css">
<--
body {FONT-SIZE: 9pt}
-->
</style>
這種方法簡化了許多步驟，但仍然不是最理想的方法，因為你必須在每個頁面的 <head> 區都放置這一段代碼。
另外這樣的做法還有一個重大缺點，就是如果我需要修改整個站點的字體大小，就必須一頁一頁的改。
03.連結式(Linking Style)排版樣式(定義直接寫在外部檔案內)：
這是目前最常見到及最好的外部摸板文件調用法，就是將 CSS 的設定作成一個單獨文件，在每個頁面裏去調用它。
一旦你需要修改網頁內的字體大小，只要修改這個 .CSS 文件，幾百個頁面就會同時修改了。
調用的具體方法如下：
(1)將上面的 CSS 代碼製作成一個 css.txt 文件，然後修改後面的檔名為 css.css。
(2)在 HTML 文件的 <head> 與 </head> 之間插入 <LINK href="css.css" rel=stylesheet type=text/css>。
備註：此處要注意有關路徑的設置正確。

⊕CSS 延伸閱讀：網頁研習室 Go 、 CSS 字體教學 Go 、 網頁字體的美化 Go 、 CSS2 Specification (英) Go 。

肆、不同平台處理網頁字體大小的問題：
⊕螢幕尺寸、解析度、作業系統：
每個人的螢幕解析度不同、每個人對字體大小的忍受度也不同，所以一份相同的網頁內容要適合所有人使用，有點困難。
當您電腦的字體單位長度解析值調整較低時，字體就會變小；反之當解析值調整較高時，字體就會跟著放大。
網頁顯示時的像素值完全取決於顯示器的分辨率，這會使顯示結果隨用戶在螢幕分辨率上的偏好而有所改變。
使用 1280 X 1024 像素螢幕解析度，畫面雖然精緻，但對於網頁上瀏覽的字體又會顯的太小。
一般常看的螢幕尺寸解析度如下：
15 吋--------------原生解析度為 1024*768， 畫面為 4:3
17 吋與 19 吋------原生解析度為 1280*1024，畫面為 5:4
19 吋寬------------原生解析度為 1440*900， 畫面為 16:10
20 吋--------------原生解析度為 1600*1200，畫面為 4:3
20 吋寬螢幕--------原生解析度為 1680*1050，畫面為 16:10
21 吋--------------原生解析度為 1600*1200，畫面為 4:3
21 吋寬螢幕--------原生解析度為 1680*1050，畫面為 16:10
22 吋寬螢幕--------原生解析度為 1680*1050，畫面為 16:10
23 吋--------------原生解析度為 1600*1200，畫面為 4:3
24 吋寬螢幕--------原生解析度為 1920*1280，畫面為 16:10
27 吋寬螢幕--------原生解析度為 1920*1280，畫面為 16:10
30 吋寬螢幕--------原生解析度為 2560*1600，畫面為 16:10
Windows 底下的字型可以在桌面按右鍵內容外觀左下方有【字型大小】可作調整。
其他如 MAC OS 等作業系統，都各自己有不同的設定方式，因為我沒有安裝與使用過，就不便告訴大家了。
另外中文和英文的最大區別就是中文是方塊字，英文是拼音文字，這也會對字體的處理有不同的影響喔。

⊕瀏覽器：
CSS2 規範中定義的縮放比例是 1.2，但是不同的瀏覽器可能有不同的解析結果。
注意：這些字體在不同的瀏覽器，雖然用同一個字級，仍會有不同的大小現象，這也算是它的缺點。
適用 IE 類型的瀏覽器：
控制台網際網路選項點兩下進入一般下方存取設定略過在網頁上指定的字型大小打勾。
在網頁中就可以直接調整字型大小，按 CTRL + 滑鼠滾輪上滾調小字型、下滾調大字型。
或按上方的檢視字型，可選擇最大、較大、適中、較小、最小五種字型尺寸。

適用 Mozilla Firefox 類型的瀏覽器：
只要按 Ctrl 再按 +就能放大字體，而按 Ctrl 再按 -便能縮小字體。
你也可以在檢視文字大小中，選擇放大、縮小、標準三種字型尺寸。

⊕延伸閱讀：網頁字體因應策略 Go 、 BLOG 字體大小 Go 、 Web 與排版學上的字體問題 Go 、 調整視窗外觀及字體大小 Go 、 CSS 中關於字體處理效果的思考 Go 、 Updating Mozilla Font Size Go 、 Font-Size Samples by piaip Go 。

伍、如何使用 CSS 適合不同平台需求：
CSS2 規範中對字體處理包含了兩種單位標籤：絕對單位和相對單位標籤。
絕對單位標籤用來定義單位，絕對大小值的代表：mm, cm, in, pt, pc 。
相對單位標籤則表示相對於另一個值的大小，相對大小值的代表：%, em, ex, px 。
em 表示字體的高度，它等於字體的 font-size 屬性經過比例計算後的值。
注意：font-size 屬性本身使用了 em 標籤，在這種情況下它會以父元素的字體大小為參考。
ex (x-height) 是最普通的字號定義方式，它根據字體的 x-height 來定義字體的大小。
px (pixels) 的設定值則關係到桌面或螢幕解析度。
大多數瀏覽器都支持 px 定義方式，使用這種方式的缺點就是用戶無法在 IE 瀏覽器中調節字體大小。
另一種實現絕對單位標籤的方法是使用縮放功能。
你可以使用這些字號標籤來縮小或放大字體：xx-small、x-small、small、medium、large、x-large、xx-large。
上面的標籤分別代表：超超小、超小、小、中、大、超大、超超大。
其中 Medium 是一個基準，帶有 small 字樣的參數會讓字體縮小，而帶有 large 字樣的參數會讓字體放大。
採用絕對單位標籤來確定字號有很多弊端，比如會對一致性和靈活性造成影響，還會在可訪問性方面出現問題。
在實際開發中，大多數設計人員採用的是相對單位，它可以讓用戶通過多種方式來調整字號，從而更便於閱讀。
所以使用這類相對單位標籤來控制版面字體，對於網頁的可伸縮性設計是非常有利的。

⊕CSS 延伸閱讀： CSS 控制字體大小的相對值 Go 、 CSS 長度單位 Go 、 注意字體大小 Go 、 如何處理網頁字體 Go 、 CSS 字體的大小 Go 、 網頁上的樣式表 Go 、 關於網頁字體大小的問題 (簡) Go 、 CSS Tutorial Traditional Chinese Go 、 A List Apart Articles CSS Design Size Matters (英) Go 。

陸、可調整網頁字體大小之方法：
最近您應該會常見到許多文字報導型網站，有一個可讓使用者自行調整字級設定小、中、大的功能，也算是一個貼心的改良。
這些功能大多數都是使用 CSS 標籤、 javascript 客戶端語言，指定某個範圍內的所有文字，來作可調整控制網頁字級大小。
在此介紹幾個從網路上找到不錯的範例給您套用，您可運用在自己的網頁或部落格中，請自行使用檢視原始碼來研究與套用。

範例一：實用簡易型 Go 、 Go 、 Go 。
範例二：進階 Cookie 記億型 Go 。
範例三：進階逐漸放大縮小型 Go 、 Go 。
範例四：可任意設定放大縮小型 Go 。
範例五：選擇顯示字體大小型 Go 、 Go 、 Go 、 Go 。
範例六：下拉式設置字號大小型 Go 、 Go 。

⊕其他參考網站： 動態調整文章字體大小 Go 、 替部落格加上調整字體大小功能 Go 、 網頁中動態更改新聞字體大小方法 (簡) Go 、 Zoom Zoom Zoom (英) Go 、 Let Users Control Font Size (英) Go 、 Let Your Web site Visitors Set Font Size (英) Go 、 Dynamic Drive DHTML Scripts (英) Go 、 Dynamically change text size on a page (英) Go 。

柒、使用網頁字體大小注意事項：
不要使用超過 3 種以上的字體，因為字體太多會顯得有些雜亂，沒有重點與主題。
不要使用太大的字體，因為版面空間有限，粗陋的大字體不能帶給訪問者更多信息。
不要使用不停閃爍的文字，想讓瀏覽者多停留一會兒的話，就不要使用閃爍的文字。
使用可調整網頁字體大小功能時，應限制其執行範圍，以免影響周邊文字排版效果。
養成在 CSS 中盡量使用相對的字號標籤數值，不要使用絕對值來定義文字的大小。
以長者為主要對象的網站，字體應該加大到 12 pt 以上，這是最起碼的瀏覽需求。
如果你的訪客大部分是長者或弱視人士，不妨加入一個可調整字體大小的 CSS 的按鈕。
有很多用戶根本不知道怎樣在瀏覽器上更改文字的大小，有這一個按鈕正好能方便他們。
不要在圖片內加入過小文字，因為 CSS 和瀏覽器都不能改變圖像內的文字大小。
如果非在圖片內加入文字不可，必須確保文字足夠大，而且要使用高反差的顏色。
文字和底色的顏色反差應該儘量增大，不要在背景使用水印的效果及使用灰色的字體。

⊕延伸閱讀：把文字大小的控制權還給用戶吧 Go 。

捌、本報導引用網路相關資料來源：
網站設計主流趨勢 Go 、 Freelance Web Developer Go 、 Controlling Font Size With Javascript Go 、 Programmer to Programmer (p2p) Go 、 HiNet 新聞網 Go 、 yam 天空-新聞 Go 、 slayeroffice Font Size Favelet Go 、 剉冰女王 Go 、 Kaie's Blog Go 。

玖、本站會員注意事項：
網頁研習室費心製作的 HTML 標籤教學網站，不論您是否已有基礎，都值得您進一步研習的好地方，敬請光臨指教 Go ！
為利網友快速取得本報導所相關檔案等資料，歡迎到網頁研習室網站進一步完整取得教材或獲得更多線上指導服務 Go 。
您也可以加入我們的教學會員或免費索取教材，直接由教材光碟 (CD-R) 片內取得更多學習資料 Go 。
本報導更多詳細所有檔案，均存放於 CD:/study/maillist3/html/08/fontsizer 目錄內，本站教材(學)會員不要忘記查看喔。
歡迎大家前往最新完工的網頁教學 議題討論版 ，發表您的看法或建議，讓彼此更能互動受惠。

拾、結論與建議：
⊕本電子報每篇報導至少花了 4 天時間編輯與修改，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
⊕本電子報 第三階段 報導資料，將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
⊕強烈建議您【學會 HTML 語法】，她真的簡單易學，懂了她您就能駕馭她，將【所見即所得】軟體當做輔助工具吧。
⊕一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
⊕為因應網友要求，本報自即日起全面改為 索取教材資料 方式 ，繼續提供及服務有此需求網友。
⊕本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
⊕本報導內容或資料，因限人力、時間，非 索取教材資料包含線上指導 網友，不接受任何疑惑解答，敬請見諒。
⊕對本篇有任何問題，歡迎大家前往網頁教學 議題討論版 ，發表您的看法或建議，讓彼此更能互動受惠。
☆本報導 非會員 可免費訂閱及享用我的電子報報導成果，而 會員 則可以進一步取得所有資料與線上指導。
☆本站所有報導資料，歡迎網友免費加入鏈結，但請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。

第三階段 97.07.31. 發行第 49 期
更多 精彩報導 文章

© 網頁研習室【電子報】李文能 主編 ©