簡單幫 Google Chrome 字體美化,讓所有字型不再模糊破碎

常常聽到使用 Google Chrome 的朋友抱怨在 Chrome 瀏覽器上的網頁字體看起來很醜,而且這可能不一定是字型的問題,而是瀏覽器字體效果不夠優美。雖然我自己比較「眼拙」,感受不是那麼深刻,不過今天看到國外一篇文章「Opera Font Rendering improves text in Opera and Google Chrome」提到一個超級簡單的優化方法,也就一起分享給大家。

方法很簡單,同時適用於 Opera 與 Google Chrome, 而且只要安裝一個套件即可。

這個「 Opera Font Rendering by thunder13 」的外掛,號稱可以把幾乎所有網頁的字體表現得更黑更清晰,讓閱讀文字的感覺更立體,而且適用所有的語言字型。因為他是採用直接透過 CSS3 對字型進行平滑優化,所以基本上無關乎字型選擇,而可以讓所有字體都變得更好看。



1.
最重要的是到底有沒有效果呢?下面是我實際測試後的比較,不能說有非常明顯的差別,但還是可以看出字體變得更黑、更清晰的效果。

下圖英文範例中,後面那張圖是最佳化後的效果。

英文調整前

英文調整後



2.
下圖中文範例裡,後面那張圖也是重新調整字體後的效果。你也可以點開大圖比較。

拉遠後整體來看,而是可以很明顯的看到第二張圖的文字,對比第一張圖,顯得比較不是那麼模糊,不是那麼破碎。

這其實也是這個套件的優點:他不是改變你的網頁字型,不會讓你產生太大的習慣落差,但是在整體閱讀上確實有更加舒適的優化。

中文調整前

中文調整後



3.
如何安裝這個字體美化套件呢?先來到套件下載頁面:「https://addons.opera.com/en/extensions/details/opera-font-rendering-by-thunder13/

如果是 Opera 用戶當然就直接安裝。如果是 Google Chrome 用戶也可以使用這個 Opera 外掛(因為:Opera 14 瀏覽器 Android App 登場,強化版 Google Chrome)。

只是 Google Chrome 要先到套件下載頁面中,在「 Add to Opera 」按鈕上點擊右鍵,選擇「另存連結為」。




4.
這時候會先下載這個套件到電腦中,我們要回到電腦上,把套件的副檔名改為「.crx」,這是 Chrome 套件的檔案格式。




5.
接著打開你的 Google Chrome 擴充功能頁面,直接把這個 crx 檔案拖曳到瀏覽器中,就能安裝,安裝後重新整理網頁就會有效果了。

不過, Google Chrome 正在推行「不讓非來自 Chrome 商店的套件安裝」,這是為了安全保障,當因此遇到無法安裝時,你可以把 crx 檔案解壓縮,然後進入擴充套件頁面勾選「開發者模式」,利用「載入未封裝擴充功能」的方式把解壓縮後的套件資料夾安裝進去。

對於長期感受到 Google Chrome 字體很醜的朋友,或許可以試試看這個套件是否能夠幫到你。


留言

  1. 我自己是有紀錄過去使用過mactype 而無法渲染瀏覽器上的問題
    http://minazukisawa.blogspot.tw/2013/11/internet-explorerchromefirefox-mactype.html

    chrome其實可以用 Custom.css
    來手動自己改字體渲染

    回覆刪除
    回覆
    1. 這個套件有可能就是用同樣的方法,對於一般用戶來說可能不會自己改,套件的好處就是對我們這些一般用戶更簡單^^

      刪除
    2. Custom.css 失效了吧?

      刪除
    3. 新版 custom.css 是失效了
      其實我都用 stylish.... 隨時愛亂改自己來 XD

      刪除
  2. 安裝試過後 字體的確看得出來差別 不過一樣都很爛...

    回覆刪除
    回覆
    1. 這給我的感覺也是,我想這因人而異。

      刪除
  3. 家里电脑用的Mactype,公司的本没装,试了下这个效果挺好的。

    Custom.css从33版本开始也被去掉了,装回Stylish,把这个扩展里的那一行css语句拿走直接用了~

    回覆刪除
    回覆
    1. 呵呵,美醜有時候比較主觀,大家就試試看自己是否合用囉~

      刪除
  4. 基於好奇我打他拆開來偷看了

    原來他只是會讓所有網頁的上面加入一段 CSS

    如圖:http://i.imgur.com/URjKZd6.png

    是說原來 Opera 跟 Chrome 的擴充功能可以通用啊
    該不會只要裡面結構寫的對
    自己包在 ZIP 之後再改名成 *.crx 或 *.nex 也可以裝吧XD

    回覆刪除
    回覆
    1. 因為 Opera 現在改用跟 Google Chrome 一樣的核心了

      刪除
    2. 感謝提供 CSS。

      我直接將 CSS 加入 Stylist 會有一樣的效果!可以省下一個擴充的資源占用。

      http://i.imgur.com/imxc5pc.png

      刪除
  5. 一直是Stylish+mactype,Chrome默认渲染实在是很难看

    回覆刪除
  6. Stylish + MacType 怎麼弄?

    回覆刪除
  7. Windows下差勁的字體渲染讓各種優化方式徒然。相較Mac或Linux系統,Windows下的字體呈現實在是拿不上臺面。

    回覆刪除
  8. Google chrome 最新版強制不給外裝 extension 了!! 看來得裝 Stylish 來搞定了!! 謝謝大家的分享

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

Google Maps 我的地圖完全教學!規劃自助旅行攻略

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

Google 表單自動關閉回覆教學:時間人數到達就過期

為什麼大家愛用 Trello ?最佳整理教學讓事情井然有序

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱