2012年10月3日水曜日

svgフォントを作ってみよう→webフォントも作れる

フォントを自作しようとした際，専用のツールが必要と考えがちですが，svgフォントであればテキストエディタとちょっとしたコツを憶えるだけで簡単にフォントを作ることができます．ここではsvgフォントの作り方について解説します．

※なお，自作したフォントが（設定値の指定漏れ等により）必ずしも正しい動作をとるとは限りませんので，十分に動作検証を行なって下さい．

※記事のヒントはアイコンをFireworksでSVG出力してWebフォントに対応させる方法から得ています．組み合わせたら，おお，ラスタ画像からいくらでもフォントを生成できるという結論に．

準備

まずは次のコードをコピーし，どこかにsvgファイルとして（文字コードをutf-8として）保存して下さい．ここでは「mysvgfont.svg」として保存したとします．

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
  <font id="myFont" horiz-adv-x="100">
   <font-face units-per-em="100" ascent="100" descent="0" 
    ideographic="0" alphabetic="0" hanging="100"/>
   <glyph unicode="1" d=""/>
  </font>
 </defs>
</svg>

実はこれだけでsvgフォントは作れました．それでは少し動作確認してみましょう．下記のようなファイルを作ってhtmlとして保存して下さい．cssの記述の仕方は一般的なwebフォントの指定の仕方と同じです．ではこれをwebブラウザで開いてみて下さい．
<!DOCTYPE html>
<html>
 <head>
  <style>
   @font-face {
    font-family:myFont;
    src: url(mysvgfont.svg#myFont) format("svg");
   }
   body{
    font-family:myFont;
    font-size:100px;
   }
  </style>
 </head>
 <body>
 1
 </body>
</html>

おそらくchrome等やopera等のブラウザでは何も表示されなかったはずです．これは文字「1」に対応する形（glyph）が定義されていないからです．
※なお1が表示された場合，そのブラウザではsvgフォントに対応していません．

グリフの形を作る

ではグリフを作ってみましょう．unicode属性が1のglyph要素のd要素にパス文字列を設定してみます．ここでは「M0,0H100V100Z」を指定しています．この文字列は「（0,0）に移動し，水平方向に100進み，垂直方向に100進み，パスを閉じる」操作を意味しています．従って下向きの直角三角形となります．
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
  <font id="myFont" horiz-adv-x="100">
   <font-face units-per-em="100" ascent="100" descent="0" 
    ideographic="0" alphabetic="0" hanging="100"/>
   <glyph unicode="1" d="M0,0H100V100Z"/>
  </font>
 </defs>
</svg>

それでは先程のhtmlファイルをリロードしてフォントを表示してみましょう．イメージした結果と少し異なっていたのではないでしょうか．おそらく天地がさかさに表示されたはずです．これは通常svgでは左上を原点としてグラフィックを定義しますが，glyph要素に限り左下を原点として扱われることによるものです．

従って正しい動作とするには予めパス文字列の天地をひっくり返しておく必要があるのです．

後はglyph要素をフォントの数の分だけコピーし，パス文字列を設定すればsvgフォントの完成です．

属性の意味

基本的にはこれだけですが，実際にsvgフォントを作るには各要素の属性の意味を知っておく必要があります．環境に合わせて書き換えて下さい．
  • font要素
    svgフォントを定義する要素です．
    • id属性
      svgフォントを参照するためのidです．
    • horiz-adv-x属性
      次の文字の位置を指定する属性です．
  • font-face要素
    svgフォントの特徴を設定するための要素です．
    • units-per-em属性
      glyphの形を定義する際の格子の数です．
    • decent属性
      原点から下端までの距離です．
    • accent属性
      原点から上端までの距離です．
    • ideographic属性，alphabetic属性，hanging属性
      文字を整列する際の基準ラインの位置を指定します．
  • glyph要素
    文字の形を定義する要素です．
    • unicode属性
      グリフを与える文字を指定します．例では「1」を指定したので，「1」の形が変わりました．
    • d属性
      グリフの形を定義します．svgのpath要素と同じですが，y軸方向が逆になっています．
以下に図解します．

この内重要な属性はunit-per-emとunicodeです．unit-per-em属性はグリフを定義するパス文字列の有効範囲を定義するので，必要に応じてサイズを変更するとよいでしょう．この値に合わせてaccent属性を設定します．unicode属性はこのフォントが対象とする文字コードを指定します．

※この他にも属性は沢山有りますが，ここでは省略します．

とは言っても，svgをそのままテキストエディで作るのは効率があまり良く有りません．そこで以前作ったラスタ画像のsvg化スクリプトを応用し，ラスタ画像からsvgフォントを生成するスクリプトを書いて見ました．理屈上では画像がフォント化されるのは当たり前なのですが，実際に試してみると意外に面白いものがあります．

追記）woff等の他の形式にに変換する

ここで得られたsvgフォントを更にIcoMoonで他の形式に変換することができます．svgフォントはさっくりと読み込んでくれるので，特に気を付ける箇所はありませんでした．これで自作のフォントをfirefoxやieでも利用可能となりました．

追記）課題

確かにこれでフォントを作ることが可能となりましたが，少々問題もあります．実際に使ってみると判るのですが通常のフォントと混在させた場合，1行の高さがガタガタになってしまうのです．これはフォントを整列する際のベースラインに不備があるものと考えられるのですが，どうにもこの設定が上手く行きません．
属性値の問題なのか，そもそも未実装なのかいまいち不明ですが，レイアウトを調整する際には要注意です．
時刻:
ラベル: , , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)