ウェブページ制作でウェブフォントファイルにベクターアイコンを追加する方法

ビットマップ画像は拡大するとぼやけて見えますが、ベクター画像はぼやけません。そのため、ベクター グラフィックを Web アイコンとして使用する人が増えています。多くの人が、ウェブサイトにアクセスして、ベクターアイコンを含むフォントファイルをダウンロードする状況に遭遇するでしょう。その後の開発では、アイコンを常に更新して追加する必要があります。ttfフォントファイルをダウンロードし続けると、多くのスペースが占有され、アイコンを追加するために複数のファイルをダウンロードする必要があります。次に、元のフォントファイルにアイコンを追加する方法について説明します。

まず、ベクターアイコンライブラリを備えた 2 つの Web サイトをお勧めします。

Alibaba ベクターアイコンライブラリ http://iconfont.cn/

Google Chrome のベクター画像ライブラリ https://icomoon.io/

最初の部分では、必要なアイコンを見つける方法を紹介します

まず、ウェブサイトにアクセスしてください：Alibaba Vector Icon Library http://iconfont.cn/

検索ボックスに「ホームページ」や「戦略」など必要なアイコン名を入力して確認します。

必要なアイコンを見つけて、その上にマウスを移動し、左下隅にある「ショッピング ボックス」を選択します。

「収納棚」の右上にお気に入りアイコンが表示されます

もう一度「戦略」を検索し、アイコンを見つけて「収納棚」に置きます。

「ログイン」をクリックしてログイン方法を選択してください

マウスを「シェルフ」に移動し、「プロジェクトとして保存」をクリックします。「保存」をクリックします。

2 番目の部分では、既存のフォント ファイルに以前のアイコンを追加する方法について説明します。

すでにあるフォントファイル「new-iconfont.ttf」を見つけて、「fontlab」ソフトウェアで開きます。

開くと、ttf フォント ファイル内のアイコンが表示されます。各アイコンには独自の Unicode コード ポイントがあります。これは、各アイコンの Unicode が独自の「ID カード」に相当するためです。外部ファイルでそのアイコンを使用する必要がある場合は、この「ID カード」を使用する必要があります。

アイコンの 1 つをダブルクリックすると、アイコンに「Unicode」がはっきりと表示されます。このアイコンは「E808」です。

ttf フォント ファイル自体の既存の Unicode エンコーディングを理解した後、Alibaba ギャラリーで選択したアイコンの Unicode エンコーディングがそれと同じ場合は、左下隅の [変更] ボタンをクリックして変更します。

変更を確認したら、「ローカルにダウンロード」をクリックし、解凍すると、いくつかのフォントファイルと CSS ファイルが表示されます。

これで、Fontlabソフトウェアを使用してttfファイルを開くことができます。

追加したい 2 つのアイコンを選択し、マウスの右ボタンで「コピー」をクリックします。次に、以前存在していたフォントファイルに戻ります。

最後のアイコンを選択し、右クリックして「グリフの追加」を選択し、必要なアイコンを追加します。

追加はこれで完了です。ショートカットキーGtrl+Alt+Gを使用して、ttfファイルとして保存します。

以上が、Webページ制作においてWebフォントファイルにベクターアイコンを追加する方法についてのすべてです。皆様のお役に立てれば幸いです。その他のコンテンツについては、引き続き123WORDPRESS.COMにご注目ください。