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

数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。目的の効果は達成されましたが、まだいくつか問題があります。たとえば、矢印の位置をまだ特定する必要があります。また、現在実現できるのは三角形の矢印のみです。他の文字を使用する場合は、やはり画像を使用する必要があります。そこで最近、もっと良い方法を探していたのですが、ついにそれを見つけました...

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

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

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

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

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

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

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

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

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

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