ICONアイコン

2803 ワード
css

ICON

  • CSS Sprite
  • background-image,background-position(注意座標、インデックス値重0開始)
  • 特徴:
  • は単一の小さなアイコンに対して、ファイルとサーバの要求回数
    • を節約する.
  • 一般的には、PNG-24のファイル形式
    • として保存する必要がある.
  • 多彩なカラーアイコン
    • をデザインできます.
  • の難点:
  • 各小さなアイコンのサイズ
    • に注意
  • 小さなアイコン間の距離

  • font+html
  • 柔軟性:アイコンの色やその他のCSS効果を簡単に変更する
  • 拡張性:アイコンのサイズを変更する
  • ベクトル:ズームアイコンは解像度
    • に影響しません.
  • 互換性:フォントアイコンは、現在のブラウザ
    • をすべてサポートします.
  • ローカル使用:異なる設計と編集で
    • を使用
  • 自分でアイコンを編集する:(http://flowerboys.cn/font)
  • EOT:マイクロソフト開発、IE専用
  • WOFF:W 3 C推奨
  • TTF:Mac OS、WIN最も一般的なフォント
  • SVG:W 3 Cオープン標準のグラフィックフォーマット
      @font-face{ font-family: "imooc-icon"; src: url("../fonts/icomoon.eot"); /* IE9      */ src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype") ,url("../fonts/icomoon.woff") format("woff") ,url("../fonts/icomoon.ttf") format("truetype") ,url("../fonts/icomoon.svg") format("svg"); font-weight: normal; font-style: normal; }

  • font+css 
        .icon-spinner:before {
        content: "\e600";
    }    
    .icon-heart:after {
        content: "\e602";
    }
  • 比較:
    CSS Sprite
    font+html
    font+css
    げんり
    背景画像の位置付け
    @font-face
    互換性
    完璧
    完璧
    色
    豊富
    単一
    拡大・縮小
    ひずみ
    HD
    メンテナンス
    困難
    単純
    • CSSがIEブラウザとFirefoxブラウザで表示するいくつかの違い
    cssはテキストを設定して、要素は箱を超えて自動的に改行して、しかも箱の範囲を超えてスクロールバーが現れて、スクロールバーのスタイルをカスタマイズします