@font-face を使用して Web ページに特殊文字を実装する (カスタム フォントを作成する)

まず、C ドライブの Fonts フォルダに移動して WEBDINGS.TTF フォントを探し、デスクトップにコピーします。次に、カスタムフォントを作成する機能を実現できる「fontforge」というソフトウェアが必要です。これを使用して、自分に適したフォントライブラリを作成します。

ダウンロード後、解凍し、WEBDINGS.TTF フォントをコピーし、fontforge.bat を実行してフォント ファイルを選択すると、次のインターフェイスが表示されます。

グラフィックキャラクターが沢山ありますね。それらの多くは以前から使われていたものですが、当時は絵で実装されていたのでしょうか？

次に必要なのは、必要な文字を選択して別のフォント ファイルに保存することです。WEBDINGS.TTF ファイル内の文字のほとんどは使用されていないため、このファイルを文字ライブラリとして直接使用するには少し大きすぎます。したがって、必要なものだけを選択する必要があります。操作するには、まず空のフォント ファイルを作成し、[ファイル] -> [新規] をクリックして、必要な文字を選択して、新しく作成したフォント ファイルにコピーします。例:

次に保存して「フォントの生成」を選択します。

次に、.ttf 拡張子でファイルを保存します。

このようにして、フォント ファイルが準備されます。しかし、これで終わりではありません。IE は .eof しか認識せず .ttf は認識しないため、他のフォント ファイルを生成する必要があります。この問題については、かなり前に記事を書いていて、操作方法は説明されているので、ここでは詳しく紹介しません。記事のリンクは、「Web ページで任意のフォントを使用する実際の操作」です。

最後に、操作が面倒だと感じる場合は、よく使用される矢印を中心にまとめた文字ライブラリをダウンロードできます。
ダウンロード

一般的に、これにより読み込まれるページファイルの合計サイズが増加しますが、独自のキャラクターライブラリがある場合は、操作性がより多様化します。文字のサイズや色、さらには影や反転などの CSS3 効果も制御できますが、画像の色を変更したい場合は、画像を修正するか、新しく作成する必要があり、柔軟性に欠けます。

PS: 私の EonerCMS では、ウィンドウの右上と右下のボタンが文字に置き換えられており、効果はかなり良好です。

PS2: アイデアを提供してくれた @小熊 に感謝します。文字の回転は CSS3 とフィルターで実現できるため、文字ライブラリを作成するときに、4 方向の矢印を 1 つだけ記録し、コードで回転させて、文字ライブラリ ファイルのサイズを縮小することができます。