k-factory

html5, javascript, css, Unity, Three.js

webfontの作り方と応用方法

先日リリースしたサービスで
数字やアイコンをカスタマイズしたwebfontとしてし使用しました。
webfontは非常に使い勝手がいいのと、カスタムフォントを作るのに
非常に便利なソフトを見つけたのでこちらにまとめてみたいと思います。

■webfontのメリット

  • ベクター形式なので拡大縮小による劣化がない
    fontデータはベクターデータです。
    つまりスマホ開発においてretio別に画像を切り出したりする必要がない!
  • 制御のしやすさ
    html上で指定文字を記述するだけ。デコレーションもcssによってある程度行える。
    陰、グラデーションなど
  • 容量比較 :画像フォントと比較した場合
    ・webfontの場合
    プロジェクトで使用したフォント数は31文字で、容量8kb
    ・画像文字の場合
    圧縮と減色ツールを用いて9kb※ファイル容量は差がないのですが、
    画像だとさらに制御用jsおよびcssファイルを読み込む必要があるので、
    トータルだとwebfontの方が軽かったりします。
    また、フォントを色別けしたい場合などは、画像の場合 色の分だけ
    書き出さなければならないが、webfontだとstyleの色指定のみ
  • 更新性が高い
    もしどこか1文字に変更があったとしても、webフォントなら フォントを変更するだけで、カーニング調整など自動でしてくれる。画像だと変更文字の幅が変わると、他の文字マップ情報に影響が出てくる。つまり単色系ならwebfontを使用した方が圧倒的に便利!

■webfontのデメリット

  • cssによるテキストへのグラデーションなどフィルタースタイル系はPCやiOS6以上でないとできない。Androidは未対応。
  • cssによるshadowを大量にかけてアニメーションをさせると処理落ちが目立ってしまう。つまりディティールの凝った装飾には向いてない。

■CSSでのwebフォント指定方法

cssでのwebフォント指定方法は、ググれば大量にでてきますが一応のせておきます。

@font-face {
 font-family: 'myfont';
 font-style: normal;
  url("myfont.woff") format('woff'),
       url("myfont.otf")  format('opentype');
 }
.myfont {
 font-family: 'myfont';
 color: #f00;
}

■カスタムフォントの作り方

「OTEdit」という有料ソフトを使用した作成方法となります。

http://opentype.jp/oteditmac.htm

「FontForge」という無料のソフトもあるのですが、めちゃくちゃ使いづらい(特にmac)上に、それほど軽くはなりません。

◆作成の流れ

  1. イラレで1000×1000でフォントを作成し、SVG書き出し ↓
  2. OTEditで任意の文字を選び、SVGをインポート!
  3. サブセットフォントメーカーにて任意の文字を指定し書き出し!以上!では詳細を以下にのせておきます。

■「龍」という文字を打つと龍のイラストになるオリジナルフォントを作成したいと思います。

  1. イラレで1000×1000でフォントを作成し、SVG書き出し
    龍
  2. OTEditで任意の文字を選び、SVGをインポート!
    • OTEditを立ち上げ、新規作成へ新規作成
    • オリジナルのフォントの書体名やコピーライトを入力書体詳細
    • まっさらな正方形のウインドウが出てきますので、 ウインドウ上部にある「A」をクリックし、「龍」と打ち込んでOKを押して下さい。
      編集文字選択
    • すると「龍」という文字の編集ウインドウが開いたと思います。 そうしましたら、先ほど書き出したSVGをインポートしましょう。
      インポート
    • インポート完了!
      龍フォント
    • この状態で保存しましょう。ここでは名前「ryuFont.otf」にしておきます。これでオリジナルフォントは完成し、もう使えるのですが、ファイル容量が大きいです。238kbもあります。
  3. サブセットフォントメーカーにて任意の文字を指定し書き出し!「龍」以外の文字の余分なデータがあるためです。 そこで「サブセットフォントメーカー」(フリー)というアプリを用いてこのフォントの中身を「龍」という文字のみにしたいと思います。
    サブセットフォントメーカー
    「作成開始」を押しましょう。

    完成です!!  4kb!!

    さらに「作成終了後、WOFFコンバータを起動するに」チェックをすれば
    「作成開始」ボタンと同時にwoff形式の軽量フォントを一緒に書き出してくれます。

    ちなみにプロジェクトで使用しているフォントは31文字8kbです。

■使用ソフト

■まとめ

ほぼ、メリット、デメリットに書いた通りですね。

1、retioごとに画像を書き出したりする必要がない
2、更新性が高い
3、制御しやすい
4、グラデはまだ無理
5、過度なアニメーション処理に弱い

です。

また、フォントのフォーマットはWOFF・TTF・EOT・SVG などがあります。 webfontとしての普及率はWOFFが最も高く軽量です、今後主流になるでしょうが、 僕がスマホの実機で調べた所、WOFFはAndroid2.2以下で表示されませんでした。 そのため「woff」と「otf」の2つを指定しておいた方がいいでしょう。

■参考文献

コメントを残す

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