フォントの素晴らしい事例を通じて CSS スプライトと SVG sprite_html/css_WEB-ITnose を学ぶ

質問: font-awesome の小さなアイコンはどのように生成されますか?

1. ブラウザのデバッグ ツールを開き、小さなアイコン font-awesome ユーザーを見つけます。その CSS スタイルは です。

icon-user:before {  content: "\f007";}[class^="icon-"]:before, [class*=" icon-"]:before {  text-decoration: inherit;  display: inline-block;  speak: none;}

2. CSS ファイルのパスに従って、font-awesome.css を開きます。 css3 @font-face この属性を参照します。

すごいです

3. src: url() をたどってアイコン svg を見つけます

パスは url('../font/fontawesome-webfont.svg#fontawesome Regular?v=3.2.1')​​ です。 format( 'svg');

sublime を使用してパスの下の svg 画像を開きます。SVG は XML 形式であるため、通常は XML ツールやライブラリで実行される変換と生成をサポートできます。特定のチュートリアルのリンク: XML 質問: SVG を使用したプログラミング

@font-face {  font-family: 'FontAwesome';  src: url('../font/fontawesome-webfont.eot?v=3.2.1');  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');  font-weight: normal;  font-style: normal;}

4. コンテンツ: 'f007' が上記の unicode="oo7" に対応していることがわかりました。

これを書くと、font-awesome のアイコンがどこから来たのかが明確になったかもしれませんが、まだ少し混乱しているはずです:

svg 画像とは何ですか? どのように生成されるのでしょうか?

すべてのアイコンを 1 つの SVG イメージにすることに何の意味がありますか?
CSS スプライトとの違いは何ですか?

はは、実は他の皆さんと同じように、私もとても興味があったので、たくさんの書類をチェックしました。何人かのマスターがすでにそれを研究していることが判明しました。一つずつリンクを貼っていきます

css-sprite

1 まず、css スプライトとは何ですか？ css スプライトは、css スプライトまたは css スプライトとも呼ばれ、背景画像をステッチするテクノロジーです。 CSS スプライト画像を使用すると、各 http リクエストが長い接続になるため、これは非常に重要です。たとえば、一部のショッピング Web サイトで非常に多くのアイコンが導入されると、HTTP のオーバーヘッドが非常に大きくなります。タグを付けた場合、悲惨な結果になるでしょう。 css-sprite の設計は、ページのアクセス速度と Web サイトのリクエスト リソースのオーバーヘッドを改善することです。

2. css-sprite 実装の原理 css-sprite は、新しい CSS3 属性、background-position によって実装され、background-size を設定することで小さなアイコンを切り取ることができます。位置 特定の小さいアイコンを配置しましょう
3. CSS スプライトの作成方法

1. オンライン MOOC に Yuanren 先生による CSS スプライトの作成方法を教えるビデオがあります。ポータル: CSS Sprite スプライト アプリケーション

2. Windows 開発者は、Baidu CSS スプライト作成ツールを直接使用でき、多くのツールがあります。

3. Sass でコンパイルする学生は、コンパスを直接使用して CSS スプライト画像、チュートリアルのリンクアドレスを自動的にマージできます
4. PS と AI を使用して手動でパズルを解くことができます

4. CSS スプライトの欠点 : 間のコスト比較パズルとアフターメンテナンスが大きい。
svg スプライトを使用できます

ここではあまり詳しくないのと、Zhang Xinxu の技術ブログから学んだので、アドレスを直接投稿します:

今後注目されるでしょう: SVG スプライトの紹介テクノロジー

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

概要:

シンボル + 使用 => SVG スプライト。また、HTML レベルでは、アイコンのコード コストは従来の CSS スプライトや一般的なフォントフェイスとほぼ同じです。コードはシンプルで保守が簡単です。すべての SVG アイコンは 1 つの SVG ソース上にあります。 Retina は優れており、サイズを任意に拡大でき、色を制御できます。これはまさに Web アイコンの将来のスターです。