網頁字體大小問題
文章推薦指數： 80 %
貳、處理網頁字體大小的HTML 語法： ⊕HTML 對於處理網頁字體大小的語法(標籤)很簡單，就是使用 字體標籤 ...
進階網路運用
第八篇
令人迷失方向的網頁製作疑問之四
網頁字體大小問題
適合程度：
初學者
一般程度
以上均宜
壹、我該如何選用網頁字體大小：
如何配合不同條件、狀況、需求選用網頁字體大小，這也是網頁設計者所面臨的常見困惑問題之一。
有些人認為較小的字體能讓網頁看起來更漂亮，並且給每個網頁中的實際內容提供更多位置與空間。
但是，字體太小有時也會導致閱讀困難；反之字體太大，看起來也會不夠精緻；如何取捨確實難為。
除此，這個問題又會因為客戶端使用者的螢幕尺寸、解析度、作業系統、瀏覽器等不同平臺而變化。
理論上一個好的網站設計，應該可以針對不同條件、狀況、需求，讓每一個訪問者看起來舒服漂亮。
將網頁字體、字型或顏色等製作成一張張圖片，就可以適用任何電腦平台，問題是網頁太大又麻煩。
這個問題將是初學者一定會面臨的困惑，也是本次主題要探討的令人迷失方向的網頁製作疑問之四。
以下報導除了蒐集網路上現有資訊外，再加上個人經驗，提供資訊給各位參考，希望對您有所助益。
貳、處理網頁字體大小的HTML語法：
⊕HTML對於處理網頁字體大小的語法(標籤)很簡單，就是使用
SIZE="N"，其N值為1~7，1是最小、7為最大、3為正常大小值(預設值)。
用
⊕除此
⊕自串接樣式表(CSS)被廣泛使用後，算是對處理網頁字體大小設置問題的最好辦法。
因為CSS靈活、容易維護，強力推薦使用CSS來替代HTML中的標籤。
CSS延伸閱讀：網頁研習室Go。
參、處理網頁字體大小的CSS(CascadingStyleSheet)語法：
許多網站為了固定版面編排，都會使用CSS語法設定字體大小，讓瀏覽者無法使用檢視字型，來更動大小。
備註：本方法僅適用IE類型的瀏覽器，對MozillaFirefox瀏覽器無效。
網絡上常見到的中文字體大小為9pt(正常大小為12pt)，針對CSS語法計有三種設定方法：
01.行內式(InlinStyle)排版樣式(直接定義在原有的HTML標籤內)：
使用
備註：這種方法非常麻煩，你必須為每段文字都設定大小，與使用HTML語法沒有多大差異。
02.內崁式(EmbeddingStyle)排版樣式：(定義在HEAD標籤內)：
CSS原屬於DHTML的一個組成部分，它可以定義整個頁面的字體顯示風格和大小，是較為簡便的方法。
例如：設定整個頁面文字大小為9pt，只要將下面這段代碼加入HTML代碼的和之間。
另外這樣的做法還有一個重大缺點，就是如果我需要修改整個站點的字體大小，就必須一頁一頁的改。
03.連結式(LinkingStyle)排版樣式(定義直接寫在外部檔案內)：
這是目前最常見到及最好的外部摸板文件調用法，就是將CSS的設定作成一個單獨文件，在每個頁面裏去調用它。
一旦你需要修改網頁內的字體大小，只要修改這個.CSS文件，幾百個頁面就會同時修改了。
調用的具體方法如下：
(1)將上面的CSS代碼製作成一個css.txt文件，然後修改後面的檔名為css.css。
(2)在HTML文件的與之間插入
備註：此處要注意有關路徑的設置正確。
CSS延伸閱讀：網頁研習室Go、
CSS字體教學Go、
網頁字體的美化Go、
CSS2Specification(英)Go。
肆、不同平台處理網頁字體大小的問題：
⊕螢幕尺寸、解析度、作業系統：
每個人的螢幕解析度不同、每個人對字體大小的忍受度也不同，所以一份相同的網頁內容要適合所有人使用，有點困難。
當您電腦的字體單位長度解析值調整較低時，字體就會變小；反之當解析值調整較高時，字體就會跟著放大。
網頁顯示時的像素值完全取決於顯示器的分辨率，這會使顯示結果隨用戶在螢幕分辨率上的偏好而有所改變。
使用1280X1024像素螢幕解析度，畫面雖然精緻，但對於網頁上瀏覽的字體又會顯的太小。
一般常看的螢幕尺寸解析度如下：
15吋--------------原生解析度為1024X768，畫面為4:3
17吋與19吋------原生解析度為1280X1024，畫面為5:4
19吋寬------------原生解析度為1440X900，畫面為16:10
20吋--------------原生解析度為1600X1200，畫面為4:3
20吋寬螢幕--------原生解析度為1680X1050，畫面為16:10
21吋--------------原生解析度為1600X1200，畫面為4:3
21吋寬螢幕--------原生解析度為1680X1050，畫面為16:10
22吋寬螢幕--------原生解析度為1680X1050，畫面為16:10
23吋--------------原生解析度為1600X1200，畫面為4:3
24吋寬螢幕--------原生解析度為1920X1280，畫面為16:10
27吋寬螢幕--------原生解析度為1920X1280，畫面為16:10
30吋寬螢幕--------原生解析度為2560X1600，畫面為16:10
Windows底下的字型可以在桌面按右鍵內容外觀左下方有【字型大小】可作調整。
其他如MACOS等作業系統，都各自己有不同的設定方式，因為我沒有安裝與使用過，就不便告訴大家了。
另外中文和英文的最大區別就是中文是方塊字，英文是拼音文字，這也會對字體的處理有不同的影響喔。
⊕瀏覽器：
CSS2規範中定義的縮放比例是1.2，但是不同的瀏覽器可能有不同的解析結果。
注意：這些字體在不同的瀏覽器，雖然用同一個字級，仍會有不同的大小現象，這也算是它的缺點。
適用IE類型的瀏覽器：
控制台網際網路選項點兩下進入一般下方存取設定略過在網頁上指定的字型大小打勾。
在網頁中就可以直接調整字型大小，按CTRL+滑鼠滾輪上滾調小字型、下滾調大字型。
或按上方的檢視字型，可選擇最大、較大、適中、較小、最小五種字型尺寸。
適用MozillaFirefox類型的瀏覽器：
只要按Ctrl再按+就能放大字體，而按Ctrl再按-便能縮小字體。
你也可以在檢視文字大小中，選擇放大、縮小、標準三種字型尺寸。
延伸閱讀：網頁字體因應策略Go、
BLOG字體大小Go、
Web與排版學上的字體問題Go、
調整視窗外觀及字體大小Go、
CSS中關於字體處理效果的思考Go、
UpdatingMozillaFontSizeGo、
Font-SizeSamplesbypiaipGo。
伍、如何使用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、
CSSTutorialTraditionalChineseGo、
AListApartArticlesCSSDesignSizeMatters(英)Go。
陸、可調整網頁字體大小之方法：
最近您應該會常見到許多文字報導型網站，有一個可讓使用者自行調整字級設定小、中、大的功能，也算是一個貼心的改良。
這些功能大多數都是使用CSS標籤、javascript客戶端語言，指定某個範圍內的所有文字，來作可調整控制網頁字級大小。
在此介紹幾個從網路上找到不錯的範例給您套用，您可運用在自己的網頁或部落格中，請自行使用檢視原始碼來研究與套用。
範例一：實用簡易型Go、Go、Go。
範例二：進階Cookie記億型Go。
範例三：進階逐漸放大縮小型Go、Go。
範例四：可任意設定放大縮小型Go。
範例五：選擇顯示字體大小型Go、Go、Go、Go、Go。
範例六：下拉式設置字號大小型Go、Go。
其他參考網站：
動態調整文章字體大小Go、
替部落格加上調整字體大小功能Go、
網頁中動態更改新聞字體大小方法(簡)Go、
ZoomZoomZoom(英)Go、
LetUsersControlFontSize(英)Go、
LetYourWebsiteVisitorsSetFontSize(英)Go、
DynamicDriveDHTMLScripts(英)Go、
Dynamicallychangetextsizeonapage(英)Go。
柒、使用網頁字體大小注意事項：
不要使用超過3種以上的字體，因為字體太多會顯得有些雜亂，沒有重點與主題。
不要使用太大的字體，因為版面空間有限，粗陋的大字體不能帶給訪問者更多信息。
不要使用不停閃爍的文字，想讓瀏覽者多停留一會兒的話，就不要使用閃爍的文字。
使用可調整網頁字體大小功能時，應限制其執行範圍，以免影響周邊文字排版效果。
養成在CSS中盡量使用相對的字號標籤數值，不要使用絕對值來定義文字的大小。
以長者為主要對象的網站，字體應該加大到12pt以上，這是最起碼的瀏覽需求。
如果你的訪客大部分是長者或弱視人士，不妨加入一個可調整字體大小的CSS的按鈕。
有很多用戶根本不知道怎樣在瀏覽器上更改文字的大小，有這一個按鈕正好能方便他們。
不要在圖片內加入過小文字，因為CSS和瀏覽器都不能改變圖像內的文字大小。
如果非在圖片內加入文字不可，必須確保文字足夠大，而且要使用高反差的顏色。
文字和底色的顏色反差應該儘量增大，不要在背景使用水印的效果及使用灰色的字體。
延伸閱讀：把文字大小的控制權還給用戶吧Go。
捌、本報導引用網路相關資料來源：
網站設計主流趨勢Go、
FreelanceWebDeveloperGo、
ControllingFontSizeWithJavascriptGo、
ProgrammertoProgrammer(p2p)Go、
HiNet新聞網Go、
yam天空-新聞Go、
slayerofficeFontSizeFaveletGo、
剉冰女王Go、
Kaie'sBlogGo。
玖、本站會員注意事項：
網頁研習室費心製作的HTML標籤教學網站，不論您是否已有基礎，都值得您進一步研習的好地方，敬請光臨指教Go！
為利網友快速取得本報導所相關檔案等資料，歡迎到網頁研習室網站進一步完整取得教材或獲得更多線上指導服務Go。
您也可以加入我們的教學會員或免費索取教材，直接由教材光碟(CD-R)片內取得更多學習資料Go。
為利網友快速取得本報導相關檔案等資料，歡迎採索取教材資料方式，完整獲得1片網頁製作相關光碟片。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。
本報導更多詳細所有檔案，均存放於CD:/study/maillist3/html/08/fontsizer目錄內，本站教材(學)會員不要忘記查看喔。
拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此引用來源，謝謝您的支持與配合。
本報每篇報導都花上8小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會HTML語法網友永久保存。
強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質，索取教材資料屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的HTML教學課程，絕對是您學習HTML的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔30日發表一次，以嘉惠更多想學會HTML網友，歡迎繼續訂閱。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。
延伸文章資訊
- 1HTML語言基本使用法
- 2使用說明:HTML編輯語法 - 台灣棒球維基館
字體大小標籤
- 3CSS font-size 文字大小 - Wibibi
設定文字大小算是CSS 中經常用到的技巧，很少人會完全不設定網頁文字的大小，在CSS 中設定文字大小可以使用font-size 的語法，可以給的値有很多，像是數字+單位、
- 4HTML font size 網頁文字大小設計
HTML font size 的功能是用來設計網頁文字大小，是很傳統的HTML 網頁文字設計功能，也是使用相當普遍的功能，font size 的文字大小範圍介於1~7 之間，數字後方不需要 ...
- 5網頁設計– HTML 文字變化
HTML 的文字大小 ... 要設定文字顯示的大小，可以透過<font> 字體標籤的size 大小屬性來達成。 size 屬性值的範圍是1 ~ 7 ，因為是字體的大小，所以是數字愈大的話，代表顯...
