(69) 【オリジナルWEBフォント作り#2】 Illustratorから文字データをインポート

投稿者: | 2018年10月23日

この記事は最終更新から 763日 が経過しています。

1. やりたいこと

前回の (68) 【オリジナルWEBフォント作り#1】fontforgeを使ってみる。 では、fontforge上で文字を描いてフォントファイルを作成し、ホームページで使用するまでを書いた。

今回は、fontforge上で文字を描くのではなく、Adobe Illustrator上で描いた文字データを fontforgeで読み込ませてみる。

2. やってみる

(1) Illustrator上で文字を描く。

1) ガイドラインを描く。

今回は半角文字を作りたいので、縦横比 2 : 1 のガイドラインを書いておく。
ここでは 10文字分作っておいた。

2) 文字を描く。

今回は数字の 0 ~ 9 を書いてみた。

3) 文字をベクタ画像ファイルに出力する。

・ガイドラインをロックする。
・任意の1文字を選択する。

「ファイル」-「選択範囲を書き出し」メニューを選択する。

「フォーマット」を「SVG」としてファイル出力する。

4) fontforgeで読み込む。

上記 2)でファイル出力したベクタ画像ファイル(SVGファイル)を fontforgeの文字編集画面で読み込む。
ここでは数字の 0として読み込む。

0の編集画面を開いた状態で、「ファイル」-「取り込み」メニューを選択する。

・「フォーマット」で「SVG」を選択する。
・上記 3)で出力した SVGファイルを選択する。
・「取り込み」ボタンを押下する。

こんな感じで枠からはみ出してしまった。

「エレメント」-「変形」-「変形」メニューを選択する。

・「拡大・縮小」を選択する。
・X方向、Y方向それぞれの倍率を勘で入力する。
・「文字幅も変形する」のチェックを外す。(この文字幅に合わせて縮小したいのだから)
・[OK]を押下する。

小さくなった文字全体を囲み、枠内の真ん中に移動する。

できた!

3. 所感

これはしんどい…
・「アルファベット+数字+記号」だけならばまだ辛抱できる。
・JIS第1水準漢字は 2,965字、
 JIS第2水準漢字は 3,390字、合計 6,355字
 気の遠くなるような作業だ…
 → 実装する漢字は数百個を選定するのが現実的かな。

全6回連載
(68) 【オリジナルWEBフォント作り#1】fontforgeを使ってみる。
(69) 【オリジナルWEBフォント作り#2】Illustratorから文字データをインポート
(70) 【オリジナルWEBフォント作り#3】fontforgeでフォント作成時に最初にやること
(71) 【オリジナルWEBフォント作り#4】どれぐらいの大きさで書くか
(72) 【オリジナルWEBフォント作り#5】一先ず半角英数字を作ったけど…
(73) 【オリジナルWEBフォント作り#6】 独自の特殊文字を作ってみる。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)