アイコンフォント VS スプライト画像 -- アイコンフォント応用実践_html/css_WEB-ITnose

この記事では、アイコンフォントとSVGを使ってスプライト画像を置き換える方法を紹介します。スプライト画像は多くの Web サイトでよく使用される技術ですが、高解像度の画面ではぼやけてしまい、ホバリング時の色の反転などの動的変更ができないという欠点があります。アイコン フォントを使用すると、上記の問題を完全に解決でき、互換性が高く、生成されるファイルが小さいという利点があります。

スプライト画像

スプライト画像の例：淘宝PC版

複数の小さな画像を1つの大きな画像に配置

使用する場合は、下図に示すように、background-positionで表示位置を調整します。スプライト画像の使用方法

スプライト画像を使用する唯一の利点は、ブラウザーのリクエストの数を減らすことです。ブラウザが同時に読み込めるリソースの数は決まっているため、IE 8 は 6、Chrome は 6、Firefox は 8 です。検証するために、次の HTML 構造を書きました: (この部分は少し主題から外れていますが、詳しく調べる必要があります)

Chrome が同時に多数の HTML をロードすることを確認します - 多数の HTML写真

その後、Chrome で開発者ツールのタイムラインから、Chrome が実際に 6 回ロードされ、一度に最大 6 つロードされていることがわかります:

Chrome が同時にロードできるリソースの最大数時間は6です

ノードAパッケージcss-spriteを使用してスプライト画像を作成でき、非常に便利です。アイコンを作成し、対応するフォルダーに配置し、設定ファイルを記述して実行するだけで、位置やその他の CSS 属性を手動で調整することなく、対応する画像と CSS を生成できます。詳細については css-sprite を参照してください

ただし、スプライト画像の使用には避けられない欠点があります

スプライト画像の欠点

HD 画面が歪みます

Mac などのデバイスのピクセル比が 2 倍の画面では、必要に応じてテキストの明瞭さと同じ品質を実現するには、画像の幅を実際の表示サイズの 2 倍にする必要があります。そうしないと、画像がぼやけて見えます。読者は、左側のテキストと右側の画像内のテキストの明瞭さを比較できます

右側の画像のテキストは、左側のフォントのテキストよりもぼやけています

特に現在、ほとんどの携帯電話が高解像度の画面を備えており、たとえば、iPhone 6 plus の解像度は 1920 * 1080 に達しています。そのため、高解像度の画面の場合、スプライト画像を使用する場合は複数の仕様の画像を用意する必要がある場合があります。

スプライト画像は変更するのが不便です

スプライト画像は生成された日に表示方法が決定されるため、動的に色を変更したり大きくしたりすることはできません（歪む可能性があります）。 、テキストなどの影効果を追加することはできません。たとえば、次のメニューでは、ホバーまたは選択すると色が反転します:

選択またはホバーすると色が反転します

または、いつか UI の色が変わるか、ボスが死ぬ必要があります。お悔やみを申し上げます。会社の Web サイトをグレートーンに変更します。スプライトを使用する場合は、すべてのアイコンを再作成する必要があります。

アイコンフォントを使用すると、上記の問題を完全に解決できます

アイコンフォントアイコンフォント

アイコンフォントは、使用するときは通常のフォントと同じようにフォントサイズ、色を設定できます。 、透明度などを簡単に変更できるのが最大の利点であり、フォントのベクトル歪みのない特性があり、IE 6 と互換性があることです。もう 1 つの利点は、215 個のアイコンに対して生成される ttf フォント ファイルが非常に小さいことです

アイコン フォントの要素

アイコン フォントの作成方法

PS と AI を準備する必要があります。 UI ダイアグラムを開き、アイコン レイヤーを選択します。通常、アイコン レイヤーはデザイナーが描いた形状です:

1. アイコン レイヤー

を選択し、次に示すように、[ファイル] -> [エクスポート] -> [Illustrator] を実行します。下の左の図、AI ファイルを生成します。 AI で生成されたファイルを開き、[ファイル] -> [スクリプト] -> [SaveDocsAsSVG] を実行すると、下の右の図に示すように、SVG ファイルが生成されます:

2. 左: AI ファイルを PS にエクスポート、右: エクスポートAI の SVG

次に、サードパーティの Web サイトを使用してアイコン icomoon.io を作成し、アプリのページに入り、インポートアイコンを選択し、生成された SVG をアップロードします

3. icomoon にアップロードします

最後にフォントを生成します

4. いくつかの仕様のフォントを生成します

使用時に @font-face を通じて導入され、アイコンのエンコーディングに従ってページ内で使用できます。

しかし、実際の操作は上記のようにスムーズではなく、多くの障害があるでしょう。また、著者は、アイコンフォントを紹介する他のチュートリアルでも言及されていない一連の実践的な経験を要約するために長い時間を費やしました。 . 他の多くのチュートリアルを見ると、実際の使用時に多くの落とし穴に遭遇する可能性があります。

ピット 1: アイコン フォントは単一のパスのみをサポートします

通常、デザイナーはアイコンを作成するときに複数のパスを使用します。ご存知のとおり、この SVG ファイルは複数のパスで構成されています。パス:

エクスポートされた svg ファイルは複数のパスで構成されています

ただし、フォントがサポートするパスは 1 つだけです。複数のパスを 1 つに結合するには、svg 形式に精通している必要があります。ただし、この方法は役に立たず、複雑なアイコンの最終的な結合効果を元の効果とまったく同じにするのは困難なので、比較的単純な状況にのみ適しています。

より賢い方法は、PS のシェイプ コンポーネントのマージ機能を使用することです:

PS を使用してシェイプ コンポーネントをマージします

この方法で生成された SVG には単一のパスがあり、場合によっては「シェイプ コンポーネントのマージ」に遭遇することがあります。メニュー項目がグレー表示になっている場合は、レイヤーの小さな目をクリックして開きます (または単一のパス自体の場合もあります)。

落とし穴 2: 一部のアイコンは複数のレイヤーで構成されています

最初はそれを知らなかったので、愚かな方法は、いくつかの SVG を個別に生成し、手動で SVG を結合することです。実際、PS には複数のシェイプを選択した後、「シェイプの結合」を右クリックします:

PS を使用して複数のシェイプ レイヤーを結合します

落とし穴 3: 生成された SVG 塗りつぶしが none に設定されている可能性があります

はい、場合によっては、生成された SVG がアップロードされると空になります。SVG ファイルをチェックすると、以下に示すように、fill が none に設定されていることを確認できます。手動で変更する必要があります svg ファイルをクリックして、fill:none を任意の色の値 (fill:#000000 など) に変更します

スクリプトを使用して svg を自動的にエクスポートします

上記の操作では、最初に PS エクスポートを実行する必要がありますエクスポートを実行するには、PSD から SVG への変換を自動的に実行できるスクリプトがあります。これは PS CS6 をサポートしていますが、CC はサポートしていません。このスクリプトへのショートカットを設定することもできます。これは非常に便利です。使用します。このスクリプトを使用する際の注意点は、レイヤー名に漢字を含めることはできません。漢字を含めないとエラーが発生するため、通常はレイヤーを新しいファイルにコピーして操作します。

PSD を SVG に使用するとさらに便利になります

ここで、アイコン フォントの使用といくつかの注意事項に焦点を当てましょう

アイコン フォントの使用

font-face を通じてカスタム フォントをインポートします。フォントをダウンロードした後、デモを参照できます。次に、アイコン フォントを使用するすべての span/a タグに .icon クラスを追加します。この .icon クラスは、font-face で定義されたフォント名に font-family を設定します

@font-face {    font-family: 'icon-font';    src:    url('fonts/icon-font.eot');    src:    url('fonts/icon-font.eot#iefix') format('embedded-opentype'),        url('fonts/icon-font.ttf') format('truetype'),        url('fonts/icon-font.woff') format('woff'),        url('fonts/icon-font.svg#icon-font') format('svg');    font-weight: normal;    font-style: normal;}.icon{    font-family: "icon-font":}

最後に、各アイコンは対応するフォント名を使用します。エンコーディングまたは HTML エンティティ:

アイコン フォントを使用する 2 つの方法

その中で、e9d3 は、このフォントの現在のアイコンの 16 進エンコーディングです。通常のフォントでは、0 のエンコードは 0x16 で、これは 0 の ASCII エンコードである 48 です。

使用中に遭遇する落とし穴:

1. Webkit ブラウザはエッジを 1 ピクセルだけ太字にします

以下のように、読者は違いを見つけることができます:

左側のアイコンにはエッジに余分なピクセルがあります。右側のアイコンには余分なピクセルがありますが、これは正常です

この問題は、上の図の 2 番目のアイコンの中央など、間隔が比較的狭い場合により顕著になります。解決策は、フォント スムージング属性を追加することです。

.icon{    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}

2. キャッシュに注意してください

新しいアイコン フォントが処理されない場合、既にロードされているブラウザにキャッシュが存在する可能性があり、新しいアイコン フォントが作成されます。再ダウンロードされないため、これに対処する必要があります。最も簡単な方法は、上記の @font-face によってインポートされた URL にバージョン番号パラメーターを追加することです:

src:    url('fonts/icon-font.eot?hadf22');

または、より根本的に: ファイル名とパス名を変更します。

3. 複数人でのコラボレーション

icomoon の無料版のデータはブラウザのローカル データベースに保存されますが、商用版では、データをクラウドに配置して複数人でのコラボレーションを実現できます。コラボレーション。無料版では、他の人が生成したフォント SVG をインポートし、それを追加して新しい SVG フォントを生成することで、複数人でのコラボレーションを実現することもできます。同様に、他の人がそれをアップロードしたい場合は、この SVG を最初にアップロードします。製品版を使用する場合は、複数人で同時に操作する場合、同じコードが同時に生成される可能性があるので注意が必要です。 Alibaba は、オンラインのアイコン フォント作成 Web サイト (http://www.icofot.cn) も提供しています。icommon と比較すると、エンコード方式は提供されておらず、HTML エンティティのみを使用できます。さらに、icommon はオンライン編集機能と多数のアイコンの検索機能も提供します。製品版では、woff2 フォントのダウンロードが提供されます。

アイコン フォントの欠点

アイコン フォントには、多色のアイコンがサポートされていないという明らかな欠点があります。フォントなのでモノクロのみとなります。本当に複数色のアイコンを使用したい場合、またはいくつかの特殊効果を加えたい場合は、SVG を使用してください。

SVG を組み合わせて使用​​する

マルチカラーアイコンの場合、ページに SVG を挿入できます:

左边的location的图标就是使用了svg，效果比直接贴一张PNG好很多

SVG的兼容性，除了IE 8不支持，其它的都还好。况且现在很多新项目都不再兼容IE 8了，不然连个border-radius都用不了。

有几种使用SVG的方法：

1. 直接copy到页面

例如，后端如果用的是JSP，那么可以借助include功能：

<%@ include file="loc-svg.jsp"%>

loc-svg.jsp里面的内容就是svg：

借助jsp嵌套svg

这样做的缺点是浏览器没办法缓存，同时会阻碍页面的加载。优点是由于是内联的，可以直接用CSS控制svg的样式

2. 使用embed/object

<embed src="loc.svg" width="100"  height="200"/>

除此之外，还可以使用img标签，将svg的路径作为src属性，这种方法的缺点是没办法用CSS控制样式。还可以转化为base64的方式。更多使用SVG的方式参见：Using SVG

当小个的SVG过多的时候，可能要考虑把多个小的SVG合并成一个SVG，就像雪碧图那样：

3. 合并SVG

如下所示：通过一个个的symbol，将多个svg合在了一起，同时将每个symbol svg定义一个id，使用的时候会用到

<svg>    <symbol viewBox="0 0 101.5 57.9" id="active-triangle"><path fill="#15c0f1" d="M100.4.5L50.7 57.1 1.1.5h99.3z"/>    <symbol viewBox="0 0 101.5 57.9" id=“logo"><path fill="#15c0f1" d="M120.4.5L50.7 57.1 1.1.5h99.3z"/></svg>

使用的时候通过外链的办法将svg引到页面上，如要用到上面定义的logo，通过“文件名#ID”的方式：

<svg viewBox="0 0 100 100">     <use xlink:href=“icon.svg#logo"></use> </svg>

然而蛋疼的IE不支持外链，但是有人写了个插件，可以让IE支持，原理是检测到浏览器不支持外链的时候就将其外链替换成相应的svg内容，详见svg for everybody

使用SVG的还有highCharts和d3.js等。

 

至此，整个流程说明完毕~ 图标字体和SVG结合使用，提升网站的高清体验。