本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-04 (建議使用Chrome瀏覽器)
接下來會連接3篇文章都介紹web-font,而第一篇是基本的web-font的置入,第二篇開始會是web-font icon,並且了解web-font icon的優缺點,第三篇就會進入自己製作web-font icons,讓會手癢的設計師自行設計web font icon。
承上一篇,本篇會介紹web fonts 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,然後選取到以下圖形。
2.可以改變大小不失真
他是個文字,只要調整font-size,就可以改變其大小。
font-size: 50px
3.可以改變顏色(單色為主)
同上,它是個文字,只要改變color就可以改變顏色。
color: #00ACEE
3.各種CSS文字屬性
當然它可以套用任何文字效果,如italic。
font-style: italic
4.陰影
在web-font icon下,text-shadow會更適合。
text-shadow: 1px 1px 5px rgba(black,.5)
5.動態效果不失真
由於它不是點陣圖形,再放大縮小等動態效果,並不會有模糊及解析度不夠的問題。
.demo6
font-size: 40px
+transition(all .5s)
...
&:hover
font-size: 50px
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
...
缺點
...一樣是支援度的問題(默...)。
參考:http://devdocs.io/css/@font-face
明天將會介紹怎麼做web-font icon,敬請期待!!