かえるの覚書

WEBページ上のタイトル表示に少し個性を出してみようと思いつつ、
画像では複数サイズ作成の必要が出てきてしまうので、自作のwebフォントを試してみた。

WEBフォントの作成自体はWEB上のサイトで可能だが、
ベースとなるデータとしてsvgファイル（ベクターの画像形式）が必要となる。
まず最初に思い浮かぶのは「Illustrator」ではあるものの、少し費用面で厳しい為、
今回はオープンソースの「Inkscape」を使用。


Inkscapeのインストール（mac）
app上にないので公式サイトよりダウンロード

macではX11上で稼動するという事で事前に
「XQuartz」のインストールが必要。
「Inkscape」のダウンロードページに「XQuartz」のリンクが貼られているのでそこからダウンロードしインストールを行う。
インストール後は要再ログイン。

上記インストール後に「Inkscape」のインストール
上部リンクのmacアイコンから飛ぶとなぜか前versionの0.48.5のリンクへ行ったので
少し下の
「Mac OS X 10.5-10.10」以下のリンク箇所からダウンロードページへ移動し0.91を取得

※初回起動時はかなり時間がかかるが、その間特に反応がなく一見動いていないように・・


Inkscapeの日本語化
Edit > Preferences


Interface > language

⇒ Japanese(ja)を選択してIncscapeを再起動

自分の環境では起動時に内部エラーとなり失敗するようになってしまった。
調べてみると環境変数から言語情報が上手く取得できていない事が原因との事で
起動スクリプトで言語設定を行っている箇所を書き換え。

アプリケーション一覧からInkscape.appを右クリック > パッケージの内容を表示
Cntents/Resources/bin/inkscapeを編集

「export LANG」が記述されている最後の行以降に以下を追記して強制的に変更

export LANG="ja_JP.UTF-8"

svgファイル作成
パスから作成するのがキレイに出来ると思いつつ、自分にとって難易度が高かった為、
作成したい文字の画像を描き、パスを抽出してsvgファイルを作成を行った。

１．任意のツールにてpng形式文字画像の用意
各文字を320px x 320pxで画像を作成

※320x320は自分が手書きで描ける範囲で出来るだけ大きいサイズとして設定
　上記より小さくても大きくてもsvg作成自体は可能
　ただし、なるべくキレイにパスが抽出できるように大きめのサイズ推奨

２．Inkscapeの起動＆サイズ設定
ファイル > ドキュメントのプロパティ


カスタムサイズで下記のように設定
幅：320
高さ：320
単位：px


３．画像ファイルの取り込み
ファイル > インポート


・埋め込み
・デフォルトのインポート解像度
・平滑化
の設定で取り込みを行う


４．パスの抽出
貼り付けした画像を選択している状態で
パス > ビットマップのトレース


好みの状態になるように設定
自分の場合は「明るさの境界：0.85」にて設定

※多重スキャンだとぼかしが入りキレイになるが背景が白くなり、背景を除去すると
　少し白いぼかしが残ってしまうので単一スキャンのほうが良さそう

OK押下後、特にダイアログは出てこないが、
既存の画像オブジェクトのすぐ上にパスオブジェクトが作成されている。
パスオブジェクト作成後は元画像オブジェクトは不要の為、削除する。


５．位置調整
画像を枠内に収める。
オブジェクト > 整列と配置
上下左右を中央寄せで簡単に位置を合わせられる

６．svgファイルとして保存
ファイル > 名前を付けて保存
ファイル形式「inkscape SVG(*.svg)」にて任意の名前で保存

７．必要な文字数分１～６の作業を行う


フォントファイル生成
WEB上でフォントファイルを生成出来るIcoMoonを利用

画面上部右の「IcoMoonApp」から生成画面へ移動


ImportIconsからさきほど作成したsvgファイルを指定


フォント化したい対象を選択


画面下部右の「GenerateFont」をクリック


文字コードが自動で「e900～」割り当てされている為
割り当てしたい文字を指定してコードを設定する
コードが分かれば直接指定しても良いが、
既存文字であれば、「e900～」の右側の□を書き換えると自動でコードが設定されるので楽


全て設定したら画面下部右の「Download」の右の歯車ををクリック


「FontName」に設定したフォント名を設定


「Download」をクリックするとフォントと一緒にサンプルファイルやstyle例のファイルをダウンロード出来る。


フォントの指定
１．ダウンロードしたファイルの「fonts」ディレクトリ内にある4ファイルをWEBサーバへアップロード

２．ダウンロードしたファイル直下にあるstyle.cssより@font-face記述をコピーし、サーバ上のcssファイルへ追記

@font-face {
 ～
}

※ソースのパスはサーバ環境に合わせて要修正

３．任意の箇所でフォント指定
自分の場合はcssファイルに専用classを追加し、使用したい文字の箇所に上記classを指定
例）

.kaerusystem-font{
 font-family: 'kaerusystem-font','Noto Sans Japanese','ヒラギノ角ゴ Pro W3','Hiragino Kaku  Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

こんな感じで表示されます。

画像ではないのでレスポンシブ対応がかなり楽に！

ただし、Icomonnでは32個セットまでだったり、作る手間だったりで
「ひらがな・カタカナ・アルファベット」に絞ったとしても
上記手順で作成するのはちょっと現実的ではないですね・・