2010/11/21

Firefox, 老花眼的好伙伴

有些網頁一開始就把字型設的很小,造成閱讀時很不方便。家中父母若年紀大了有老花的問題,那就更是吃不消。

昨天研習時,光明國中的吳建章組長就提到他現在因為老花的關係而看不清許多網頁的內容;前一陣子 glglace 也在問說是不是有方法可以調整網頁的字型大小?我想,調整字型大小這應該是許多人的需求,所以就來提一下吧!

『等一下!啊就用 Ctrl-+ 來調整頁面大小就好了啊,還需要調整什麼字型?』嗯,事情沒有那麼簡單,我們就先來做一下實驗吧!

寫個用 8pt 字體呈現的整人網頁

首先,我在 Notepad++ (類似 Windows 記事本的程式) 中寫一個簡單的網頁,內容一共有三段:第一段用一般的字型大小;第二段用 8 點 (pt, points) 的字型大小;第三段用 20 pt。

所謂的 8 pt、20 pt 字型大小,就是你在 Word 中選擇的 8 & 20 字型大小。在 Word 等國外的程式都是用 pt 來計算字型大小。每一英吋有 72 點,所以 8pt 的字體印出來就是 1/9 英吋。

測試字型大小的網頁原始碼
圖、測試字型大小的網頁原始碼

這一個網頁,在 IE 底下看的話,可以清楚看到三個段落字體大小有很顯著的差異,第二段的字體小的像螞蟻一樣,真是找讀者的麻煩。

過小的字體不易閱讀
圖、過小的字體不易閱讀

調整 IE 的字體

遇到這樣的問題你可能會想要把 IE 的字體放大,好,我們就來試看看。從『檢視 ==> 字型 ==> 最大字型』這邊,我們把顯示的字型調到最大。

選擇最大字型觀看網頁
圖、選擇最大字型觀看網頁

ㄟ,結果是祇有第一段的字型變大;第二、三段的字體大小完全沒有變化,中間這個段落還是很不容易閱讀。

調整顯示字型無法改變小字
圖、調整顯示字型無法改變小字

這是因為 IE 的功能祇對那些沒有指定字型大小的段落有作用。第一段沒有指定字體大小,所以修改 IE 的顯示設定後,畫面上的字型就隨之改變;第二段 & 第三段我都事先指定字型大小 (分別為 8 pt & 20 pt),這時 IE 對它們就沒有作用了。

調整 IE 的頁面顯示比例

好,我們還可以調整頁面的顯示比例,利用這一招應該就可以將字型放大了吧?讓我們試著把頁面調整為 200% 的大小試看看。

將畫面放大為 200%
圖、將畫面放大為 200%

嗯,將畫面放大為 200% 之後,第二段的字體可以閱讀了,但是第三段的字又變得過大了。一行才少少幾個字,變得要一直拉網頁才能繼續閱讀。

這樣還是很不方便,弄得我們在閱讀不同網頁時,需要不斷的 Ctrl-+ & Ctrl-- 來調整頁面大小,這樣也很惱人。

放大頁面後,正常字體變得過大
圖、放大頁面後,正常字體變得過大

顯然 IE 沒辦法達到我們的需求,放棄它吧。那麼,相同的網頁在 Firefox 底下又是呈現什麼模樣呢?

Firefox 下設定最小顯示字體

ㄟ,竟然祇有第三段字體不一樣,第一段、第二段的字體是相同大小?這是怎麼一回事?

第一、二段的字體大小相同
圖、第一、二段的字體大小相同

其實在 Firefox 中會這樣子顯示是因為我做了一點設定的關係。

七、八年前我常看大陸的網頁,大陸的網頁設計者不知道在想什麼,都喜歡用 8pt 字來呈現網頁,根本是在找碴!為了舒適的觀看大陸網頁,所以我努力調整 IE,嗯,達不到我想要的結果。既然 IE 無法達到我的需求,我就改用 Firefox 試試。

改用 Firefox 後,Bingo,一下子成功了,不管大陸的網頁設計為 8pt 還是 7pt、6pt,甚至是 1pt,我都能用最舒適的字體大小來觀看。

要設定 Firefox 這樣顯示也很簡單,祇要在 Firefox 中,選擇『工具 ==> 選項』就可以進入字體設定頁面。

選擇『工具 ==> 選項』
圖、選擇『工具 ==> 選項』

進入選項頁面後就可以看到設定字體的選項,但是在這邊還無法達成我們的需求,我們還要選擇『內容 ==> 進階』做進一步設定。

選擇進階設定
圖、選擇進階設定

進入字型的進階設定後,有個『最小字型大小』的功能,這就是我們所要的功能。我自己是設定為 16pt,你可以自己調整。

設定顯示時最小的字體尺寸
圖、設定顯示時最小的字體尺寸

我在這個功能設 16pt 的用意是:如果網頁上有任何小於 16pt 的字體,就以 16pt 顯示;如果超過 16pt,就以網頁的設定為準。

所以觀看剛剛的網頁時,第一段沒有指定字體大小,用 16pt 顯示;第二段是 8pt,小於我們設定的 16pt,因此以我們設定的 16pt 來顯示;第三段 20pt,大於我們的設定值,因此以網頁預定的 20pt 來顯示。

最小的顯示字型為 16pt
圖、最小的顯示字型為 16pt

Firefox 這樣的設計比起 IE 的放大頁面會更容易使用。IE 的放大頁面會讓原本就已經夠大的字體變得太大而不易閱讀,但 Firefox 就沒有這樣子的困擾。顯見在字體大小設計這一點上,Firefox 是比 IE 來的方便許多。

如果你想要試用一下 Firefox,可以從這裡下載我設定好的 Firefox,解開就可以使用了。我設定好的 Firefox 還有其他功能,都值得試一試。

同場加映 Chrome 的設定方式

既然 Firefox 可以設定最小的顯示字體尺寸,那麼比 Firefox 晚出現的 Google 瀏覽器 Chrome 可以有這樣的功能嗎?

Chrome 也有字型設定選項,讓我們設定為 16pt 試看看……結果無效。

Chrome 的字體設定頁面無法達成需求
圖、Chrome 的字體設定頁面無法達成需求

我們在 Chrome 的設定頁中設定所有字型都要 16pt,結果顯示時還是沒有改變,Chrome 讓我們失望了。

Chrome 的顯示沒有改變
圖、Chrome 的顯示沒有改變

其實 Chrome 是可以改變最小的字體尺寸的,祇不過比較麻煩一點,必須要用記事本之類的程式直接修改 Chrome 的設定檔。

首先,請你關掉 Chrome,這樣我們才能編輯它的設定檔。

再來,請用記事本 (或類似的程式) 打開 Preferences 這個設定檔。這個檔案存放在比較深的地方,要找一下。

  1. 如果你用的是 Win7,這個設定檔的存放位置是:
    "C:\Users\使用者帳號\AppData\Local\Google\Chrome \User Data\Default\Preferences"
     
  2. 如果你用的是 WinXP,那麼這個設定檔放在:
    "C:\Documents and Settings\使用者帳號\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences"
     
  3. 而我用的是可攜版 ChromePlus,設定檔放在:
    "ChromePlus\ChromePlusUserData\Default\Preferences"

找到檔案後以記事本開啟,找到 webkit 這一個段落,在其中加入:

"minimum_font_size": 16,

注意,引號 & 最後的逗號都不能省略喔。加好這一串文字後存檔。

手動加入 Chrome 的字體大小
圖、手動加入 Chrome 的字體大小

設定好後,再開啟 Chrome 觀看剛剛的整人網頁,第二段就以 16pt 字體大小來呈現了。

Chrome 也可以無視整人網頁
圖、Chrome 也可以無視整人網頁

利用設定最小顯示字體的功能,我們可以讓 Firefox & Chrome 無視網頁設計者的整人設計,直接以對我們而言最舒適的字體大小呈現網頁,這是非常人性化的一項設計。

如果家中有年紀大的人要上網,可以考慮改用這兩款瀏覽器。考慮設定的難易程度,可能 Firefox 對於年紀大的使用者會更便利,祇要在程式中點一點、選一選就可以設定好字體大小,哪天老花程度加重還可以很容易的改變設定值,這樣長輩也可以自己改設定了。

參考資料:

  1. glglace 老師:瀏覽器-設定最小字型
  2. 感謝新竹瘋浪客 & bstc 網友幫忙找尋 Chrome 設定字型的方式
  3. 下載設定好的 Firefox
  4. 8pt 的整人網頁

Technorati : , , , , ,

8 則留言:

  1. 很有用的資訊,但是美中不足,字體大小的用詞令人混淆。請參考:
    http://khanzi.blogspot.com/2010/03/blog-post_09.html

    回覆刪除
  2. Yukie 老師寫這篇文章很讚;Hsuchang 網友很厲害,發現這個很少人會注意到的地方。
    但是我再雞婆一下提醒老師:「號」才是數字越小字型越大,「級」跟「點」都是數字越大字型越大;電腦的字型大小通常是用「點」(pt)。

    回覆刪除
  3. 您好:

    已經修改字體大小的用詞,不知道這樣是不是可以呢?請您再過目一下!謝謝您!:D

    回覆刪除
  4. 是的,我又寫錯了。我要說的是『號』,結果打成『級』。^^a

    因為我原本內文中寫的都是 XX 號字;所以要回覆 Hsuchang 時,其實是在講『號』,但卻誤寫為『級』,謝謝指正。

    內文我一併修正了,希望這樣資訊會更正確一些!:D

    回覆刪除
  5. 請問有沒有辦法可以讓chrome像IE一樣,可以設定"略過網頁預設字型"嗎?!

    回覆刪除
  6. 在 ptt 上有網友分享過,利用 Chrome Stylist 這個套件強迫所有網頁都用我們的字型顯示。方法如下,請參考:

    作者: l801 () 看板: Browsers
    標題: [-GC-] 強制修改網頁字型/字體
    時間: Fri May 7 23:17:34 2010

    chrome本身設定是遵守網頁指定的字體,有些網頁看起來就會很不協調。

    ex. http://www.clafy.com/images/before.png


    若要強制更改的話,可以利用套件「Chrome Stylist」。

    https://chrome.google.com/extensions/detail/pabfempgigicdjjlccdgnbmeggkbjdhd



    設定方法:
    1. 把「demo」刪除(delete ALL)

    2. 把「LDR simple」勾選 "All site"

    3. 修改CSS設定字體

    ----------------------------------------------------------------
    * {
    font-family: "你要的字體", "你要的字體", sans-serif !important;
    }

    pre, code, kbd, samp, var {
    font-family: "你要的字體", "你要的字體", monospace !important;
    }



    ----------------------------------------------------------------

    4. 存檔完成


    再回去同個網頁,已經改成自訂的字體了。ex. http://www.clafy.com/images/after.png


    若覺得網址列的icon礙眼,把「Stylist icon」改成 "none" 即可。

    回覆刪除
  7. 感謝提供~有空再來試試^^

    回覆刪除
  8. 昨天測試了一下,Chrome 現在要調整『最小字型』比較簡單了,不過我還是會遇到一些網頁的字型無法改變。

    所以目前為止,要有比較舒服的閱讀效果的話,Firefox 還是比較推薦的程式。

    回覆刪除