カスタムアイコンフォントの作成：IllustratorとIcomoonを使用して排他的なアイコンシステムを作成します
コアポイント：
@font-face
写真：listenorason
ただし、一般的なセットには含まれていないより具体的な
glyphが必要になる場合があります。または、プロジェクトの他のデザイン要素とアイコンデザインをより適切に調整したい場合があります。これらの場合、ゼロから新しいアイコンセットを描画する必要があります。プロジェクトにアイコンセットを追加する2つの一般的な方法：
webフォント
独自のアイコンを作成します
独自のアイコンフォントを構築するには、最初のステップはアイコンを設計することです。このタスクにはIllustratorを使用し、SVG形式で保存します。
デザインスタイルを確認します描画を開始する前に、ストロークサイズ、グリッドスケールなど、グリフのスタイルプロパティを定義する必要があります。
また、描画する前にフォントスケッチを描画することも役立ちます。また、非常に大まかなスケッチ（以下に示す）でさえ、必要なすべてのシンボルのアイデアを見つけるのに役立ちます。
Glyphのメッシュサイズを決定できます。私のアドバイスは、ターゲットサイズ（16x16pxなど）または非常に大きなサイズで直接描画することではありません。代わりに、60〜80pxのグリッドが通常私に適していることがわかりました。通常、このサイズから上下にスケーリングすることは成功します。
もちろん、これは「独立した」ルールではありません。プロジェクトの要件と経験は状況によって異なる場合があります。
この記事では、8pxストロークを使用してアイコンを描画し、入力せず、64x64pxグリッド内に設定することにしました。
描画を開始します
Illustrator Artboardsは非常に便利です：各グリフを異なるアートボードに描画し、各グリフを単一のファイルに保存できます。アートボードは、再配置、名前が変更され、スタンドアロンSVGファイルとしてエクスポートできます（これはまさにIComoonに必要なものです）。各アートボードには、独立した軸座標を持つこともできます。これは、オブジェクトのアライメントに非常に価値があり、後で表示されます。
ここで、新しい64x64pxのイラストレータードキュメントの作成を開始できます：
「アートボードの数」オプションで必要なすべてのアートボードの作成を開始できることに注意してください。必要に応じてアートボードを追加することを好みますが、最初にすべてのアートボードを作成できない理由はありません。 
Illustrator Workspace
アートボードは、グローバルルーラーの起源と呼ばれるポイントから始めて、キャンバスに配置されます。さらに、各アートボードには、独自のオリジナルの起源と定規もあります。
アートボードツールを使用して新しいアートボードを見つけた場合、常にグローバルルーラーを使用します。他のほぼすべてのケースでは、ビュー→ルーラー→アートボード（またはグローバル）ルーラーのオプションに変更して、アートボードルーラーを使用します。
グローバルルーラーを使用している場合、アートボードに描かれた各オブジェクトは、その単一の起源（つまり、グローバルルーラーの起源）に対して描画されます。それ以外の場合、座標はそれを含むアートボードの起源を指します。
要するに、アートボードルーラーシステムを使用してください：アートボードは、
グローバルルーラーの起源に従ってキャンバスに配置されていますイラストレーターのグリッドは、グローバルルーラーの起源から始まるワークスペースに配置されます。設定→ガイドとグリッドを選択して、プロパティを設定できます。 64x64pxキャンバスを両側に1つずつ8部に分割したいので、16pxごとにメイングリッドラインを設定し（アートボードが4x4パーツに分割されます）、2つの下位区分を実行します。
グリッドはアートボードと完全に整合する必要があります。
最初のglyph
次に、塗りつぶしを取り外して、8pxサイズのブラックストロークを設定する必要があります。この時点で、円をアートボードに合わせることができます（「アートボードに合わせて」オプションが選択されていることを確認してください）：
しかし、結果は私たちが期待したものではありません。イラストレーターは、ストローク幅を計算せずに
パスを調整します。ありがたいことに、これは、設定パネルに[Preview Boundariesの使用]オプションを設定することで簡単に解くことができます。 Illustratorは、アラインメントとサイズに関係なく、アートボード内のストローク幅を計算するようになりました。これにより、描画がより速く、より正確になります。 
完全なグリフ図面
各グリフを描画し、一度に新しいアートボードを追加する必要があります。アートボードツールとオプション /ALTを使用して既存のアートボードをドラッグするか、アートボードパネルの新しいアートボードアイコンをクリックしてアートボードを追加できます。 
グリフは常にアルファベット順にアップロードされているため、イラストレーターのアートボード注文をフォントのグリフと一致させたい場合は、これを念頭に置いてください。
各アートボードの名前（スペースなし）：これは、Glyphの名前と生成されたCSSのクラス名になるため、意味のある単語を使用することが非常に重要です。
ストロークを使用してシンボルを描くことがよくありますが、フォント作成には特別なニーズがあります。覚えておく必要があります：
ファイルをiComoon icomoonウェブサイトは、アイコンフォントを構築するためのオンラインアプリケーションを提供しています。このアプリは、名前のないアイテムで始まり、シンボルを選択できる無料のアイコンライブラリへのアクセスを提供します。
独自のグリフをアップロードするため、各ライブラリの右側にある小さなメニューを使用してすべてのプリロードされたライブラリを削除できます（選択したシンボルのみがフォント中央に追加されるため、これは必須ではありません）。プロジェクトをシンプルに保ちます。 [アプリケーションメニューバーの右側にある[プロジェクト]アイコンの管理をクリックして、プロジェクトを保存できます。 ICOMOON FREEアカウントでは、プロジェクトはブラウザに保存されるため、プロジェクトデータ（JSONファイル）をダウンロードするか、プレミアムアカウント（クラウドにプロジェクトを保存できるようにする）にアップグレードする前に、他の場所でアクセスできません。 。
インポートアイコンボタンを使用してSVGファイルをアップロードできるようになりました。グリフは、アプリケーションにコレクションとして表示されます。各グリフは、この段階でアプリケーションが提供するツールを使用して、簡単に再配置、削除、または編集できます。また、コレクションメタデータ（コレクションの名前と著者情報の名前）を編集したり、コレクションの右側にある小さなメニューを使用して他のタスクを実行したりすることもできます。
アイコンは、編集ツールを使用してアプリケーションで編集できます。この方法でベクトルデータを変更することはできませんが、グリフのサイズを変更または移動したり、SVGファイルをダウンロードしたり、交換したりできます。
フォントを構築するには、最初に選択ツールを使用して必要なすべてのアイコンを選択する必要があります（必要に応じて、「すべて/no選択すべて」コマンドを> collectionメニューで使用することもできます。 ）。選択したグリフを黄色の境界線から識別できます。次に、ページの下部にあるフォントボタンをクリックする必要があります。
アプリケーションは、選択したすべてのシンボルを持つヘルパーウィンドウをロードし、各シンボルにPUA範囲内のicomoonによって割り当てられたグリフ、名前、およびユニコードポイントを表示します。 PUA範囲を使用することは、PUA範囲内のアイコンをホストするために最も安全なユニコード領域と見なされますが、ICOMOONでは、必要に応じて上部の[コード]ボタンをクリックして標準の基本ラテン範囲を使用できます。
新しいコードまたは文字を手動で挿入することにより、各文字に別の範囲コードを割り当てることもできます。
ルールに使用されます）とクラスのプレフィックスおよび/またはサフィックス（これは生成されたCSSのセレクターとして使用されます）を追加します。 @font-face
ダウンロードされた.zipファイルには、さまざまな形式のフォント、リファレンスとして使用できるデモファイル、プロジェクトを回復するために再アップロードできる.JSONファイルが含まれています（たとえば、別のコンピューターで表示）、もちろん、.cssファイルエンコードアイコンもあります。
ルールとすべてのシンボルセレクターが含まれています。 @font-face
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-88cxph');
src:url('fonts/icomoon.eot?#iefix-88cxph') format('embedded-opentype'),
url('fonts/icomoon.woff?-88cxph') format('woff'),
url('fonts/icomoon.ttf?-88cxph') format('truetype'),
url('fonts/icomoon.svg?-88cxph#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="myicon-"], [class*=" myicon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.myicon-alert:before {
content: "\e600";
}
.myicon-arrow-down:before {
content: "";
}
/* etc */これはアイコンフォントを構築するための非常に迅速な方法であることがわかりましたが、完璧なワークフローを見つけて、IllustratorとIcomoonの両方が提供できるすべてのオプションをテストするには確かに時間がかかります。
幸せな時間をお祈りします！
（以下はFAQパーツであり、元のテキストに従って書き換えて統合され、形式で調整されています）
イラストレーターとicomoonを使用したアイコンフォントの作成に関するFAQ（FAQ）
Q：icomoonでアイコンフォントを作成することの利点は何ですか？A：Icomoonは、独自のアイコンセットを構築および管理できる強力なツールです。さまざまなアイコンを選択できます。また、独自のSVGをインポートしてカスタムアイコンフォントを作成することもできます。 Icomoonを使用する利点は、ICONフォントを作成するプロセスを簡素化することです。これは、初心者でも簡単に使用できます。また、アイコンのサイズ、色、その他のCSSプロパティを制御し、設計の柔軟性を高めることができます。
Q：自分のsvgをiComoonにインポートする方法は？A：独自のSVGをIComoonにインポートするには、まずSVGが正しく最適化されていることを確認してください。次に、icomoonアプリに移動し、[アイコンをインポート]ボタンをクリックします。 SVGファイルを選択してアップロードできます。アップロードすると、アイコンは「カスタムアイコン」セクションに表示され、アイコンセットに追加されます。
Q：Adobe Illustratorを使用してIcomoon用のSVGを作成できますか？A：はい、Adobe Illustratorを使用してIComoon用のSVGSを作成できます。 Illustratorは、SVGファイルを作成および編集できる強力なベクトルグラフィックエディターです。 Illustratorでアイコンを作成した後、SVGファイルとしてエクスポートしてから、ICOMOONにインポートしてアイコンフォントを作成できます。
Q：Icomoonのアイコンのサイズと色を制御する方法は？A：ICOMOONでは、CSSを使用してアイコンのサイズと色を制御できます。アイコンフォントを生成するとき、Icomoonは各アイコンのクラスを含むCSSファイルを提供します。このCSSファイルを編集して、アイコンのサイズ、色、その他のプロパティを変更できます。
Q：icomoonでアイコンフォントを作成するためのベストプラクティスは何ですか？A：Icomoonでアイコンフォントを作成するときは、ベストプラクティスを念頭に置いてください。まず、SVGがIComoonにインポートする前に正しく最適化されていることを確認してください。第二に、ウェブサイトの読み込み時間を短縮するために、アイコンをできるだけ小さく設定してみてください。最後に、さまざまなブラウザのアイコンフォントをテストして、正しく表示されることを確認することを忘れないでください。
Q：IComoonを使用してビジネスプロジェクトのアイコンフォントを作成できますか？A：はい、ICOMOONを使用して、ビジネスプロジェクト用のアイコンフォントを作成できます。ただし、IComoonが提供するアイコンの一部は、ライセンス制限の対象となることを知っておく必要があります。商業プロジェクトで使用する前に、アイコンのライセンスを常に確認してください。
Q：アイコンフォントを私のウェブサイトに追加するにはどうすればよいですか？A：ICOMOONでICONフォントを作成した後、WebサイトのHTMLにICOMOONが提供するCSSファイルを含めることにより、Webサイトに追加できます。その後、CSSファイルで定義されているクラスを使用して、アイコンをWebサイトに追加できます。 Q：icomoonで設定されたアイコンを作成した後、編集できますか？ A：はい、Icomoonで設定されたアイコンを作成した後、編集できます。これを行うには、IComoonアプリケーションの[プロジェクトの管理]セクションに移動します。そこで、プロジェクトを選択して、アイコンセットに必要な変更を加えることができます。 Q：すべてのブラウザにアイコンフォントが正しく表示されていることを確認するにはどうすればよいですか？ A：すべてのブラウザにアイコンフォントが正しく表示されていることを確認するには、開発中にさまざまなブラウザでテストしてください。さらに、ICOMOONは、必要なブラウザ互換性の修正を備えたアイコンフォントCSSファイルを提供します。 Q：icomoonでアイコンフォントを作成する問題に遭遇した場合はどうすればよいですか？ A：IcomoonでICONフォントの作成に問題がある場合は、ICOMOONドキュメントを参照するか、ICOMOONサポートチームにヘルプについて連絡してください。さらに、多くのオンラインコミュニティやフォーラムがあり、支援やアドバイスを求めることができます。
以上がIllustrator＆Icomoonを使用してアイコンフォントを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
