一句 CSS 讓 fontawesome 圖標字體變細
自從 iOS 某個版本發布之后，前端的流行趨勢是什么都越來越細…字體越來越細…圖標線條也越來越細。而老物 fontawesome 粗壯的線條風格很顯然已經跟不上流行的趨勢了，不過在現代的瀏覽器里，倒是有辦法讓 fontawesome 改頭換面，重獲青春。
2018-04-12 補充：好久沒有訪問 fontawesome 的官網，現在居然也出 solid / regular / light（可能就是你們想要的細版）三種版本了！如果你放在訪問了 light 版之后覺得還不夠細，請繼續閱讀。
在 CSS3 里，有一個叫做 text-stroke 的屬性，它的作用聽上去很無用，就是在字體的邊緣處描上細線，就如你當前看到的這段話一樣，有點 80 年代美國廣告常用的字體效果的趕腳……
查看上段落的 CSS 代碼，即可了解 -webkit-text-stroke 用法。注意雖然有 -webkit- 前綴，但目前 IE 和 Firefox 也開始支持部分帶 -webkit- 前綴的屬性了…… 這是被 chrome 和 safari 這些 webkit 內核的瀏覽器逼得多慘……
<p style="-webkit-text-stroke: 1px gray; color: white; font-size: 2em">
注意這個屬性看上去類似此段所用的 text-shadow 屬性，但仔細看 text-shadow 只能往外擴散陰影，而 text-stroke 可是同時往字體內部和外部填充的。
利用 text-stroke 這個特性，將描邊的顏色設置成跟背景一樣，就等於變相將字體變細了，比如當前你看到的可能是你見過最細的字體了！而此屬性最棒莫過於用在 fontawesome 的圖標上！
比如這個大家最愛最離不開的圖標，原版是這樣：
經過『細化』之后：
當然，鏤空的圖標，則是將描邊的顏色設置成跟字體一樣的顏色：
vs
此方法雖然不失為一種成本比較低的做法，現在也只能這么用，但畢竟比較 hack，會有一些副作用（比如填充顏色必須和背景色一致，但按理說跟背景色應該沒關系，背景色一變還得記得跟着變，以及背景如果不是單色就不行了），還是期待 CSS 本身能早日支持這種效果。