iT邦幫忙

DAY 19
2

CSS沒有極限系列 第 15

CSS沒有極限 - Web-font & icons 3連發 - 第二發 Icons

本篇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,敬請期待!!


上一篇
CSS沒有極限 - Web-font & icons 3連發
下一篇
CSS沒有極限 - Web-font & icons 3連發 - 自製web font icons
系列文
CSS沒有極限41

尚未有邦友留言

立即登入留言