SVGのプロポーショナルフォントを作る

2013-05-19

"画像ファイルから無料でフォントを作成する"ではInkscapeでフォントを作りましたが、Inkscapeの機能のみではプロポーショナルフォントを作ることができません(SVGタグを編集すればできなくはないですが・・)。Inkscapeで作った等幅フォントを文字毎に幅の異なるプロポーショナルフォントに変更する方法を紹介します。

やり方は簡単で、Inkscapeで作ったSVGのファイルをテキストエディタで開いて、編集するだけです。

例えば幅1024pxで作ったフォントで、ある文字(例えば"a")だけ幅を700pxにする場合、テキストエディタで開いて、<fontっていう箇所をみつけて、

<font
	horiz-adv-x="1024"
	id="font3055"
	inkscape:label="font 1">
	<font-face
		units-per-em="1024"
		id="font-face3057"
		font-family="SVGFont 1" />
	<missing-glyph
		d="M0,0h1000v1024h-1000z"
		id="missing-glyph3059" />
	<glyph
		glyph-name="glyph 1"
		id="glyph3061"
		unicode="a"
		horiz-adv-x="700"
		d="m 586.95893,-24.5265 c 0,0.6152 0.50336,1.1186 1.11857,1.1186 0.61521,

上のように対応するglyph(上記ではunicode="a"を記述したglyph)にhoriz-adv-x属性と幅に対する値を入力するだけです。

この属性は「次の文字の横位置」を設定する属性なので、文字"a"の次に入力した文字は、(一文字のフォントサイズが1024に対する)700の位置に配置されることになります。当然Inkscapeでフォントを作るとき、この文字はページの700pxよりも右側に描いた部分があると次の文字に重なってしまいますので左寄せで描いたほうが良いでしょう。

SVG