吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】SVGフォントについて

2015年2月28日 / category : svg

SVGフォントについて、まとめてみます。
と言っても、いまSVGフォントの勉強中なのですが、いまのところ

「SVGフォントって、、、需要あるの?」

と疑問を持っております・・・。

まず、どんな感じで使用されるかと言うと、
webフォントとして設定するフォントの1つにsvgフォントがあります。
そのwebフォントの基本的な使用方法ですが、フォントファイルを用意します。
これは、いくつか形式があって、サンプルサイトなどのデモを見ると、次の5つ形式で設定されているケースが多いです。

.eot
.woff
.ttf
.otf
.svg

これらがフォント形式のファイルになるわけですが、それぞれ何かと言いますと、

.eot
IE独自のフォント仕様です。IE8以下は他のフォント形式が対応していないため、IE8に対応させるためには.eot形式のフォントファイルが必要となります。

.woff
webフォント専用のフォント仕様だそうです。現在の最新のブラウザであれば、ほぼ対応していますが、古いバージョンのブラウザには対応していないようです。
対応していないバージョンのブラウザは、IE8以下、Firefox3.5以下、Chrome5以下、Safari3.1以下、iOS4.2以下、Android4.3以下です。

.ttf
TrueTypeフォントです。Apple社が開発したフォントシステムだそうです。こちらも基本的に、最新ブラウザに対応しています。
対応していないバージョンのブラウザは、IE8以下、iOS4.0以下です。

.otf
OpenTypeフォントです。アドビシステムズ社とマイクロソフト社が共同で開発したフォントだそうです。この形式の対応ブラウザは、.ttfと同様です。

.svg
SVGフォントです。ただ・・・、対応ブラウザが少ない。。。safari3.1以上とiOS4.0以上・・・のみです。

これらのフォント形式をwebフォントとして設定するわけですが、
指定方法はCSSで次のように記述します。

CSS
@font-face {
	src: url('xxx.eot') format(''embedded-opentype'');
}

上記は、.eot形式を設定した場合です。複数指定する場合は、次のように記述します。

CSS
@font-face {
	src:url('xxx.eot') format('embedded-opentype'),
		url('xxx.woff') format('woff'),
		url('xxx.ttf') format('truetype'),
		url('xxx.svg') format('svg');
}

先ほど説明したように、形式によって対応ブラウザが異なります。
最新ブラウザのみをターゲットにした場合は、.woff形式のみの指定で問題ありません。

CSS – 最新ブラウザのみターゲットにした場合
@font-face {
	src:url('xxx.woff') format('woff');
}

IE8と、Android4.3以下もターゲットに含める場合は、

CSS – IE8とAndroid4.3も対応した場合
@font-face {
	src:url('xxx.eot') format('embedded-opentype'), //IE8対応
		url('xxx.woff') format('woff'),
		url('xxx.ttf') format('truetype'); //Android4.3対応
}

いまのところ、.svg形式が出てきていない・・・
ただし、iOS4.0に対応しているのは、.svgのみです。
では、iOS4.0に対応したい場合は、.svgなのか・・・と言いたいのですが、そもそも.svgファイルがwebフォントとして使用されるのか、というのが疑問です。
.svg形式で使用される例として出てくるのは、アイコンなどのベクター画像です。

例えば、”home”という文字列があった場合、「ホーム」アイコンを表示しよう。

と言う感じの使われ方です。

よって、いまのところの僕の見解は、SVGは今後web制作で使用されてくるような気がします。ただし、svgフォントに関しては、対応ブラウザが少なく、需要がないのでは・・・。

構造についてですが、次のような構造で定義します。

<font>
  <font-face />
  <missing-glyph />
  <glyph />
  <v-kern />
  <h-kern />
</font>

font : フォント宣言
font-face : フォントの属性
missing-glyph / glyph : フォントの形
v-kern / h-kern : カーニング

中途半端ですが、svgフォントに関しては、一旦ここまでとしておきます。
今後svgフォントがどうなるかを注目し、需要が出てきたと思ったら改めて勉強することにします。