搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 HTML/CSS 語法 Ligature Symbols 超讚的網站圖標應用方式 寫文字直接帶 ...
byadmin 發表於 2013-5-29 03:04:35 , 5436人已閱讀 , 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.jpg


Ligature Symbols 的使用方法也很簡單,只需要兩個步驟就可以:
第一、下載ligature_symbols後(官網下載),先在CSS檔案中載入呼叫語法(如下):
  1. @font-face {
  2.     font-family: 'LigatureSymbols';
  3.     src: url('LigatureSymbols-2.11.eot');
  4.     src: url('LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
  5.          url('LigatureSymbols-2.11.woff') format('woff'),
  6.          url('LigatureSymbols-2.11.ttf') format('truetype'),
  7.          url('LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
  8.     src: url('LigatureSymbols-2.11.ttf') format('truetype');
  9.     font-weight: normal;
  10.     font-style: normal;
  11. }

  12. .lsf, .lsf-icon:before {
  13.   font-family: 'LigatureSymbols';
  14.   -webkit-text-rendering: optimizeLegibility;
  15.   -moz-text-rendering: optimizeLegibility;
  16.   -ms-text-rendering: optimizeLegibility;
  17.   -o-text-rendering: optimizeLegibility;
  18.   text-rendering: optimizeLegibility;
  19.   -webkit-font-smoothing: antialiased;
  20.   -moz-font-smoothing: antialiased;
  21.   -ms-font-smoothing: antialiased;
  22.   -o-font-smoothing: antialiased;
  23.   font-smoothing: antialiased;
  24. }

  25. .lsf-icon:before {
  26.   content:attr(title);
  27.   margin-right:0.3em;
  28.   font-size:130%;
  29. }

  30. //使用UNICODE時需要在此先定義
  31. .lsf-icon.amazon:before {  
  32.   content: '\E007';
  33. }
複製代碼
第二、任選使用以下三種帶入方法:
方法範例(1):使用文字呼叫 (效果僅圖片)
  1. <p>Simple use for mailto link.</p>
  2. <a href="mailto:mail@example.com" class="lsf">mail</a>
複製代碼
方法範例(2):使用TITLE呼叫圖片 (超連結效果會帶圖片與文字)
  1. <p>Use tha icon with text.</p>
  2. <a href="http://twitter.com/" class="lsf-icon" title="ubuntu">ubuntu</a>
複製代碼
方法範例(3):使用unicode呼叫 (超連結效果會帶圖片與文字)
  1. <p>Use tha icon with unicode.</p>
  2. <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a>
複製代碼
範例(1)~(3)效果圖
Ligature Symbols_.jpg


實際效果可見本工作室範例網頁:http://srpro.org/htmldemo/websymbols/
Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.190778 second(s), 48 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-3-29 15:04

回頂部