本篇所用的範例是Ligature Symbols，它所提供的的icons非常多，而且簡單易用。
Ligature Symbols
本篇所用的範例是Ligature Symbols，它所提供的的icons非常多，而且簡單易用。
http://kudakurage.com/ligature_symbols/
首先當然是先下載他們所提供的檔案，解壓縮後有完整的html以及CSS範例，先找到LigatureSymbols-2.05.ttf的字型檔，將字型檔放在本地端的資料夾，本範例會放在sylesheets的fonts資料夾內。
在他們的網頁下方有提供完整的CSS，包含@font-face以及.class的設定，基本上直接拷貝即可；這邊將會用sass作範例。
//sass code
//compass 的font-face@include，而其中的format在compass是不需要設定的
+font-face("LigatureSymbols",font-files("LigatureSymbols-2.05.eot","LigatureSymbols-2.05.ttf","LigatureSymbols-2.05.woff","LigatureSymbols-2.05.svg#LigatureSymbols"),normal,normal)
.lsf
font-family: 'LigatureSymbols'
font-size: 300%
-webkit-text-rendering: optimizeLegibility
-moz-text-rendering: optimizeLegibility
-ms-text-rendering: optimizeLegibility
-o-text-rendering: optimizeLegibility
text-rendering: optimizeLegibility
//文字的渲染方式
-webkit-font-smoothing: antialiased
-moz-font-smoothing: antialiased
-ms-font-smoothing: antialiased
-o-font-smoothing: antialiased
font-smoothing: antialiased
//文字的平滑模式
-webkit-font-feature-settings: "liga" 1, "dlig" 1
-moz-font-feature-settings: "liga=1, dlig=1"
-ms-font-feature-settings: "liga" 1, "dlig" 1
-o-font-feature-settings: "liga" 1, "dlig" 1
font-feature-settings: "liga" 1, "dlig" 1
//在OpenType 有更進階的設定，但這邊沒有特別研究
//html <div class="lsf">twitter</div>
查詢一樣在這邊：http://kudakurage.com/ligature_symbols/
接下來只要輸入對應的class，然後再到該頁面查詢對應的單字就可以套用，如範例我只要輸入class，在class內在填入twitter就可以獲得twitter的icon。
Web font icon有什麼優點?
1.可以被搜尋
如以下範例，使用者可以在瀏覽器(Ctrl+f)搜尋twitter，然後選取到以下圖形。
twitter
2.可以改變大小不失真
他是個文字，只要調整font-size，就可以改變其大小。
font-size: 50px
twitter
3.可以改變顏色(單色為主)
同上，它是個文字，只要改變color就可以改變顏色。
color: #00ACEE
twitter
3.各種CSS文字屬性
當然它可以套用任何文字效果，如italic。
font-style: italic
twitter
4.陰影
在web-font icon下，text-shadow會更適合。
text-shadow: 1px 1px 5px rgba(black,.5)
twitter
5.動態效果不失真
由於它不是點陣圖形，再放大縮小等動態效果，並不會有模糊及解析度不夠的問題。
.demo6
font-size: 40px
+transition(all .5s)
...
&:hover
font-size: 50px
twitter
6.各種文字的效果混合使用
這是我之前做的立體文字效果，當然它也能夠套用在web-font icon上。
//立體文字的mixin
@mixin text-cubicStyle($lenght: 15,$rgb: #dfdfdf)
$all: ()
@for $i from 1 through $lenght
$all: append($all, append(#{$i}px #{$i}px 0 ,darken($rgb,$i/1.6)),comma)
text-shadow: $all,$lenght+1px $lenght+1px 1px rgba(0,0,0,.3),$lenght+2px $lenght+2px 10px rgba(0,0,0,.6)
//@include 上面的立體效果
.demo5
+text-cubicStyle
...
twitter
缺點
注意，這會有支援性的問題。
明天將會介紹怎麼做web-font icon，敬請期待!!
撰寫一篇文章需要花上非常多的時間，如果你關閉 Adblock (廣告阻擋器)，我會非常的開心 🤗。 (╭(°A°`)╮))