補足 MacType！Google Chrome 字型進階渲染法

好久沒寫部落格了，也不是沒時間，其實就是懶而已...
為了這幾天搞得焦頭爛額的事情，今天逼自己一定要擠出一點時間來寫完這篇「Chrome 字型進階渲染法」，其實這篇也是套用前人的設定然後自己修改一點點內容而已...

我是一個字型控，曾經為了某個瀏覽器無法調整成自己想要的字型就放棄使用該瀏覽器（當然有可能是我的能力不足，功力不深，所以無法達到自己要求的完美境界）。

當初還沒學習 HTML、CSS 和 JavaScript 時，都是模模糊糊、道聽塗說，看人家說哪個外掛套件好用就去安裝來用，完全不了解它裡面各項設定的意義，所以往往目的只達成一半（字體渲染適用於大部分網頁，但是某些網頁就是不行），導致弄一弄就心灰意冷，乾脆放棄掉該瀏覽器好了！

舉例來說，雖然套用了 MacType，但是 Chrome 下的 Yahoo 奇摩就還是不聽話，下列兩圖就很明顯：

：：：套用 css 前後效果比較圖：：：

Before	After

為什麼？為什麼我安裝了 MacType 以後，Yahoo 奇摩的新聞內容字型還是新細明體？？就是這樣，當初就是為了這一點就極度不爽，把 Chrome 給放棄使用而改用 Firefox，但是後來也發現其實 Firefox 也沒有好到哪裡去，一樣有字型的 bug...
（所以其實是自己不好好學習，了解原理之後就知道原來自訂修改這麼簡單）

最近學習到 JavaScript 和 CSS 之後才知道，其實 Chrome 的擴充功能（extension）就是用這些語言所寫成的，而 CSS 的作用就是改變網頁呈現的效果，所以早期網路上也有相關文章的作法是自己做一個擴充功能加到 Chrome 裡面，但是這只適用於舊版 Chrome，較新版本的 Chrome 則基於安全性問題不會讓你這樣做，而是希望你使用來自 Chrome 線上應用程式商店的擴充功能。剛好，線上商店裡面就有我們需要的東西 "My Style"，可以用來設定網頁顯示的字型。

安裝好這個擴充功能之後，只要在瀏覽器的網頁讀取完畢後按一下 Ctrl+M，網頁右側就會出現一個文字輸入區域，其中寫著 "Enter your styles here."，我們只要在這裡加上一些 CSS 控制碼，就可以把網頁效果修改成自己想要的呈現方式囉。


--------------------------------CSS 內容---------------------------------------
/*字體陰影*/
*{text-shadow:0.02em 0.02em 0.02em !important;}

/*字體樣式*/
*:not([class*="icon"]):not(i){font-family: "Droid Sans Fallback" !important;}
------------------------------------------------------------------------------


第一段就不解釋了，就是為字體加上陰影，陰影的粗細可以自行調整上述三個數值來達到想要的效果，但是相關設定的意義請自行查詢就是。

在第二段「字體樣式」中，其中 "Droid Sans Fallback" 就是要使用的字體，各位可以依照自己的需求去修改字體，不一定要和我的一樣。
這一段的意思就是說，對於所有網頁中不屬於圖示或斜體的內容類型，瀏覽器都會優先使用我在這裡指定的自訂字型，而不是那些網頁中的指定字型。

修改完後通常都可以立即看到結果，因此修改時不用擔心害怕，覺得改得不好的當下再改成別的值就可以了，完成後只要再按一次 Ctrl+M 就可以關掉那個文字輸入區域。祝各位在瀏覽器上都可以看到美美的網頁字型啦！！

2015/11/14 Update:
~~my setting~~
*{text-shadow:0.02em 0.02em 0.02em !important}
*:not([class*="icon"]):not(i){font-family:"Source Han Sans Medium" !important}
.res {width:110% !important}
/**/
#rcnt{left:30% !important}
and for ptt:
span[type=bbsrow]{display: block;overflow: hidden;}
#cursor{transform: translateY(14px);}