UI図の小さいアイコンをicon font_html/css_WEB-ITnoseにします

多くのインタラクションを伴う UI ダイアグラムには、多数の小さなアイコンが存在する場合があります。一般に、スプライトを使用して、複数の小さなアイコンを 1 つの大きな画像に作成することができます。さまざまな方法の比較については、を参照してください。ブロガーの記事 新しい css3 属性のクリップパスを使用して小さなアイコンを作成するブログ この記事では、icon-font を使用した作成方法、つまり PS で svg をエクスポートし、フォント アイコンを作成する方法について詳しく説明します。この方法には、スプライト グラフィックスでブラウザが複数のリクエストを送信する必要がないという利点があるだけでなく、クリップ パス/S​​VG ベクトルをロスレスで使用できるという利点もあり、IE6 以降をサポートします。 PS で複数のアイコンをグラフに配置するには、スプライト グラフを使用します。

スプライト ダイアグラムの欠点は、アダプテーション レイアウトでは、伸縮中にベクトルが歪む可能性があることです。アイコン フォントの使用は、ロスレス ベクトル増幅です。

次にアイコンフォントの作り方を紹介します。

1. PS と AI をインストールする必要があります

2. PS スクリプトをダウンロードします: PSD を SVG に変換し、中の指示に従い、スクリプトを PS スクリプト ディレクトリ: Adob​​e Photoshop/presets/scripts に置き、PS を再起動します。

3. レイヤー内のアイコンシェイプレイヤーを新しいドキュメントにコピーし、レイヤーの名前を .svg 接尾辞に変更します。 SVG 末尾は主に、スクリプトがどのレイヤーを変換する必要があるかを識別するために使用されます。レイヤーに名前を付けるときは、英数字とアンダースコアを使用するのが最善です。そうしないと問題が発生する可能性があります。

4. [ファイル] -> [スクリプト] -> [PSD to SVG] スクリプトを実行すると、ドキュメントが保存されていないというメッセージが表示される場合があるので、実行前に新しく作成したレイヤーをファイルとして保存します。

6. スクリプトを実行すると、psd が配置されているディレクトリに 2 つのファイル、svg と ai が生成されます

7. 生成された ai ファイルを AI で開くと、ドットだけが存在することがわかります。下図の左側に示すように、マウスを置くと、それらのパスが存在することがわかりますが、表示されません。

8. AI で塗りつぶし、表示されている部分を黒で塗りつぶし、svg として保存します: File->script->saveDocs as Svg

9. 次に、icomoon を使用してフォントを作成します。 icommon を開き (この Web サイトは Google のサービスを使用しているため、開けない場合はプロキシを使用する必要があります)、右上隅の [インポート] アイコン ボタンをクリックして、上で保存した svg ファイルをインポートします。

icomoon は選択ページにジャンプし、インポートしたアイコンを選択します:

次に、右下隅にある Generate Font:

をクリックして、生成されたアイコン ページにジャンプし、コードの取得をクリックします。

使用コードを観察すると、6 つのパスを表すためにアイコンが 6 つのスパンに分割されており、その間隔を調整する必要があることがわかりました。これは望ましい結果ではありません。理想的な結果は、1 つのスパンのみがアイコンを表すことです。

icomoon が提供したヒントによると:

多色のグリフを避けるために、すべての色を同じ色に変更した後、SVG を再インポートします。

の色が一貫していないため、上記の設定が表示されないことが判明しました。表示されている他の5つのパーツは、表示されている左下のポイントの色と一致しないため、同じ色に調整されます。

属性設定は NONE に設定されているため、左下隅にあるものと同じ色に変更します。

保存後に iComoon にアップロードし、[コードを取得] をクリックします。ダウンロードして開くと、生成されたフォント ファイルが fonts ディレクトリに配置されます。同時に、icomoon は @font-face を通じてフォント ファイルをインポートします。 ie8 以下をサポートする必要はありません。この例では、前または後の疑似クラスも使用します。たとえば、上のメニュー ボタンは次のとおりです。

      当然也可以用icommon提供的大量免费的图标和搜索功能，但是使用这些图标的缺点是大小可能是不一致的，导致在UI里面原本相同大小的字体图标需要设置不同的的字体大小。而使用UI图制作的svg大小比例就会贴近UI图，无需设置多个font-size。

      需要注意的是，如果以后还要再导入新的图标，需要在原先的基础上添加，icommon支持导入project，将上面的下载的包里面的selection.json导入即可。如果把之前的icon和新的icon再导入一次，会导致之前的icon的编码发生变化。

      上面使用了用AI/linscape的方法修正PS导出的ai/svg文件，也可以直接用文本编辑器修改svg文件。

      有的时候，可能需要手动调整下svg的结构，例如上面的搜索框，在PS里面设计师是画了两个圆和一条线，如下面所示：

<svg version="1.1" width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"     xml:space="preserve"><!-- 外面的圆 --><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19    S8.507,0,19,0z"/><!-- 里面的圆 --><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19    S9.611,2,19,2z"/><!-- 放大镜的手柄 --><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/></svg>

     如果两个圆的fill颜色都设置成一样的灰色的话，那么生成的文件是这样的：

      里面那个圆的fill属性的作用导致放大镜中间被填充了，因此需要手动改一下，将两个圆放到同一个path，这样围起来的路径就是一个环：

<svg width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"     xml:space="preserve"><!-- 把两个圆放到一起形成一条封闭的路径，即一个环 --><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19    S8.507,0,19,0    M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19    S9.611,2,19,2z"/><!-- 放大镜的手柄 --><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/></svg>

      生成的放大镜就正常了：

      还有的图标可能是由多个图层组成的，这个时候需要分别生成svg，然后放到一起，用Inkscape或ai调下相对位置。这里需要点svg的知识，可以参考MDN上的svg教程。

      最后再比较下大小，把上面第一张sprites图里面的9个小图标都制作成icon fonts，生成的文件大小为：

      最大的为6.6KB，小的为2.6KB，而上面生成的sprites图为7.1KB，用tinypng压缩后为3.0KB。可以看到，如果只有几个图标并且图标本身就比较小时，在文件大小上，icon-font比sprites图的优势并不明显。当图标增加到18个，即把上面的图标再导入一次，现制作的icon-fonts大小为：

      18个icon-font的最大svg格式的为13kb，最小的为4.1KB，sprites图为6KB，考虑到svg格式的并不太会可能被浏览器下载， 如下图所示。所以在文件大小上，icon-fonts还是比sprites图有优势的，如果图标个数不多的话差别不大。如果图标需要展示得很大的话，icon fonts的优势就很明显了。

IE6 IE7 IE8 Firefox 3.5 Firefox 3.6 Chrome Safari Opera

仅支持 Embedded OpenType(.eot) 格式。

仅支持 Embedded OpenType(.eot) 格式。

仅支持 Embedded OpenType(.eot) 格式。

支持 TrueType、OpenType(.ttf, .otf) 格式。

支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。

支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

来自w3 help

      使用sprites图的另外一个缺点是，在移动端低配置的设备，可能会给内存和CPU带来很大的压力，如果sprites图太大的话。而icon font的最大优点是矢量无损，缺点是只能支持单色的图标，因为它是一个普通的字体，还有在制作上稍麻烦。

 

参考：

      1. 使用css3新属性clip-path制作小图标

      2. icomoon，制作icon font的在线工具

      3. PSD to SVG