byadmin 發表於 2013-5-29 03:04:35
, 5631人已閱讀 , 0人回應
關於網站圖標ICON設計圖標是我們在做網頁設計一定會使用到的設計元素，其實看似簡單的圖標應用，裡頭藏了非常多的豐富學問！舉例來說：某些網站當你使用Chrome或是FireFox的"檢查元素"時，你會看到有些圖標是直接圖片插入式，有些圖標是以背景帶入，然後透過CSS來控制文字與圖片的位置。當然用圖片直接插入是較早期的設計方式，對於現代的標準化來講是不正規的 , 因為這些圖標對於搜尋引擎是沒有意義的，不應該作為圖片插入，正確的方式是要使用第二種方法透過CSS背景帶入。 之後又更一步的衍生出為了減少客戶端對於伺服器端的請求次數，將所有圖標整合進同一個PNG檔案，而設計師透過定位的方式將圖片正確帶出套用在網頁設計上，此方法我們稱作 CSS Sprites 屬於CSS的進階用法。
再進化 Web Symbols隨著CSS的演進，再將圖標應用帶入新的世代也就是 Web Symbols 的出現，Web Symbols它將圖標轉化成Web Font，讓使用者在套用圖標時，是使用文字去呼叫，例如我需要 Mail 的圖標，我就輸入mail , 它就會透過CSS帶出mail的符號，這種圖標使用方式有以下四點好處：
第一、優於SEO因為它使用有意義文字的文字去呼叫；
第二、它也將全部的圖標包入一個FONT檔案中，載入時間快；
第三、也是 Web Symbols 最大的優點，就是它可以被CSS進行樣式渲染，例如我可以自由為圖標調整大小、顏色...等。
第四、可以有效防止圖標被盜連 ;
Ligature Symbols
Ligature Symbols 就是一款使用了 Web Symbols 概念的圖標樣式，由Kazuyuki Motoyama 所開發，整合了百餘款常用的圖標樣式，大家可以進入官網去查看所有圖標樣式：
Ligature Symbols 官網
Ligature Symbols 的使用方法也很簡單，只需要兩個步驟就可以：
第一、下載ligature_symbols後(官網下載)，先在CSS檔案中載入呼叫語法（如下）：- @font-face {
- font-family: 'LigatureSymbols';
- src: url('LigatureSymbols-2.11.eot');
- src: url('LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
- url('LigatureSymbols-2.11.woff') format('woff'),
- url('LigatureSymbols-2.11.ttf') format('truetype'),
- url('LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
- src: url('LigatureSymbols-2.11.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
- }
- .lsf, .lsf-icon:before {
- font-family: 'LigatureSymbols';
- -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;
- }
- .lsf-icon:before {
- content:attr(title);
- margin-right:0.3em;
- font-size:130%;
- }
- //使用UNICODE時需要在此先定義
- .lsf-icon.amazon:before {
- content: '\E007';
- }
方法範例(1)：使用文字呼叫 (效果僅圖片)- <p>Simple use for mailto link.</p>
- <a href="mailto:mail@example.com" class="lsf">mail</a>
- <p>Use tha icon with text.</p>
- <a href="http://twitter.com/" class="lsf-icon" title="ubuntu">ubuntu</a>
- <p>Use tha icon with unicode.</p>
- <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a>
實際效果可見本工作室範例網頁：http://srpro.org/htmldemo/websymbols/ |
|
喜歡
Animate.CSS 讓你輕鬆使用56種 CSS3 動畫特效
Font Awesome 擁有200多款圖標樣式的字體庫 !
