1. WebフォントとSVGフォント
2012年3月8日
W3C SVG WG 藤沢 淳
fujisawa.jun@canon.co.jp

2. HTML5とWebフォント

HTML5の概要



HTMLの10年振りの新バージョン（2011年
5月にLast Call、2014年にW3C勧告予定）
www.w3.org/TR/html5/
広義のHTML5はHTML5/CSS/SVG/WOFF
から構成されるOpen Web Platformを指す
Webフォントとは



CSSフォント機構（@font-face）によりWeb
ブラウザからダウンロード表示可能なフォント
対応フォントフォーマットはOpenType、SVG
フォント、WOFFフォントなど
欧米では多くのWebフォントサービスがスタート

3. Webフォントサービス

欧文フォントサービス



Adobeが買収した代表的なWeb
フォントサービスのTypeKit
typekit.com/
Monotype、Linotype、ITCの
フォントが使えるFonts.com
webfonts.fonts.com/
和文フォントサービス


フォントワークス、イワタ、モトヤが
ソフトバンクと提携したFONT+
webfont.fontplus.jp/
DNPの秀英体が使えるデコもじ
decomoji.jp/

4. Webフォントの仕様

WebフォントのW3C標準仕様



CSS Level 2において1998年に導入
www.w3.org/TR/CSS2/
策定中のCSS Fonts Level 3で機能強化
www.w3.org/TR/css3-fonts/
おもな機能



ダウンロードフォント、ローカルフォント、システムフォントに対応
ファミリ（font-family）、ウェイト（font-weight）、字幅（fontstretch）、スタイル（font-style）、サイズ（font-size）を定義
フォント選択のためのマッチングのアルゴリズムを規定

5. CSS Fonts Level 3の新機能

対応フォーマットを整理


OpenType機能のサポート


WOFFフォント（.woff）、TrueTypeフォント（.ttf）、
OpenTypeフォント（.ttf/.otf）、Embedded OpenType
フォント（.eot）、SVGフォント（.svg）の5種類
カーニング（font-kerning）、上付き・下付き（font-variantposition）、リガチャ（font-variant-ligatures）、キャピタライ
ズ（font-variant-caps）、数字（font-variant-numeric）、
スワッシュ（font-variant-alternates）などに対応
同一オリジン制限の導入


原則はWebフォントと同一サイトのWebページのみ利用許可
クロスオリジンリソース共有（CORS）による制限緩和も可能

6. 異体字のサポート

東アジア言語対応



font-variant-east-asianプロパティーを導入
OpenType機能タグのjis78、jis83、jis90、jis04、smpl、
trad、fwid、 pwidを指定可能
異体字の使用例

JIS78字形（jis78）

プロポーショナル字形（pwid）
■
旧字体（trad）

7. Webフォントの使い方

マルチウェイトフォント




ウェイトごとにルールを記述
ローカルフォントのソースは
localでフォント名を指定
ダウンロードフォントはurlで
ダウンロード元を指定
複合フォントの定義




言語ごとにルールを記述
"-"でUnicode範囲を指定
"?"は任意の数字にマッチ
必要最小限のフォントファイ
ルのみをダウンロード可能
@font-face {
font-family: Helvetica;
src: local(Helvetica),
url(fonts/Helvetica.ttf);
}
@font-face {
font-family: Helvetica;
font-weight: bold;
src: local("Helvetica Bold"),
url(fonts/HelveticaBold.ttf);
}
@font-face {
font-family: DroidSans;
src: url(DroidSansJp.woff);
unicode-range: U+3000-9FFF,
U+FF??;
}
@font-face {
font-family: DroidSans;
src: url(DroidSans.woff);
unicode-range: U+000-5FF,
U+1E00-1FFF, U+2000-2300;
}

8. WOFFフォントの仕様

WOFFフォントのW3C標準仕様




Web Open Font Formatの略称
Microsoft、Mozilla、Operaの提案を
ベースに2010年3月に仕様策定開始
WOFF File Format 1.0が勧告候補
www.w3.org/TR/WOFF
おもな機能



zlib圧縮に対応したTrueType/OpenTypeフォントのWeb
フォント専用のパッケージング形式
ライセンス情報などを記述するXML拡張メタデータブロックと
任意のデータを格納可能なプライベートデータブロックを定義
DRM著作権管理機能は提供しない（WOFFフォントをOSのシ
ステムフォントとして再利用することは困難）

9. Webブラウザの対応状況

すべての主要WebブラウザがWOFFフォントに対応済

IEとFirefox以外ではSVGフォントも利用可能
Webブラウザ
TrueType
OpenType
Safari
Firefox
Opera
Chrome
a
a
a
a
WOFF
a
IE
EOT
a
a
a
a
a
SVGフォント
a
a
a

10. SVGとSVGフォント

SVGの概要



PDF相当の描画機能とFlash相当のアニメー
ション機能を備えたベクトルグラフィック形式
www.w3.org/TR/SVG/
広義のHTML5の一部でありすべての主要
Webブラウザで利用可能
SVGフォントとは



ベジェ曲線で定義されたグリフにTrueTypeフォント相当の
メタデータを加えたSVGベースのフォントフォーマット
カラー、グラデーション、アニメーションなど任意のSVG描画
機能を利用したスケーラブルなフォント定義が可能
zlib圧縮による圧縮SVG形式（.svgz）での配布に対応

11. SVGフォントの活用例

アイコンフォント作成サービス


選択したアイコンをのみを含む
SVGフォントをオンラインで作成
できるFontomas
nodeca.github.com/fontomas/
行政機関向け文字情報基盤


戸籍統一文字や住基ネットワーク
統一文字を網羅した58,712文字を
含むIPAmj明朝フォントを提供
ossipedia.ipa.go.jp/ipamjfont/
Webで閲覧可能な文字情報一覧表
においてSVGグリフデータを公開

12. SVGフォントの仕様

SVGフォントのW3C標準仕様



SVG 1.0において2001年に導入
www.w3.org/TR/SVG10/
SVG Tiny 1.2において機能制限
www.w3.org/TR/SVGTiny12/
おもな機能




任意のSVG描画を利用したグリフ定義（SVG Tiny 1.2では
ベジェ曲線アウトラインのみ利用可能）
SVGファイルとして独立したフォント定義とHTML/SVGファイ
ル内でのインラインフォント定義の両方が可能
国際化テキスト描画と縦書きレイアウトに対応
OpenType機能やヒンティングには未対応

13. SVGフォントの描画品位

SVGフォントの描画サンプル

people.mozilla.org/~jdaggett/tests/svgfonttest.html
Mac OS XプラットフォームのSafariで描画

14. SVGフォントの使い方

SVGフォントの定義




font要素で全体、glyph
要素で個々のグリフを定義
d属性にベジェ曲線を記述
unicode属性に符号位置
を指定（符号列を使用可能）
2つの埋込み方法


HTML/SVGファイルにSVG
フォントをインライン記述
font-face-uri要素で
HTML/SVGファイルから
SVGフォントをリンク参照
<svg
xmlns="http://www.w3.org/2000/svg"
width="100" height="100">
<defs><font horiz-adv-x="500">
<font-face font-family="Vera"
units-per-em="1000"/>
<glyph unicode="S"
glyph-name="S" d="…">
<glyph unicode="V"
glyph-name="V" d="…">
<glyph unicode="G"
glyph-name="G" d="…">
</font></defs>
</svg>
<defs><font horiz-adv-x="500">
<font-face font-family="Vera">
<font-face-src>
<font-face-uri
xlink:href="Vera.svg#f"/>
</font-face-src>
</font-face>
</font></defs>

15. 既存フォントの拡張

SVG外字の追加




@font-faceルールを複数
使用して既存フォントに外字
を追加定義
unicode-rangeプロパティ
で適用符号範囲を指定
後で定義したルールが優先
拡張フォントの定義


既存のシステムフォントと
と区別なく利用可能
マルチウェイトフォントや複合
フォントも同様に定義可能
@font-face {
font-family:Helvetica;
src:local(Arial);
}
@font-face {
font-family:Helvetica;
src:url(HelveticaEx01.svg#f);
unicode-range:U+E758;
}
@font-face {
font-family:Helvetica;
src:url(HelveticaEx02.svg#f);
unicode-range:U+E759;
}
<html>
<body
style="font-family:Helvetica;">
<div>&#xE758;SVG&#xE759;
</div>
</body>
</html>

16. 外字とSVGフォント

外字のカテゴリ




JIS X 0208に含まれない表外字（絵文字など）
同じ符号位置を持つが字形の異なる異体字
符号位置を持たない文字やグラフィックイメージ
外字に対するニーズ変化




昔のベンダー定義文字（NEC特殊文字やIBM
拡張文字）はUnicode標準の一部として共通化
携帯電話の絵文字もUnicode 6.0に収録済
電子政府の戸籍データ処理では異体字が課題
EPUBなどの電子出版では出版物に依存して
ごく少数出現する符号化できない文字が課題

17. 絵文字とSVGフォント

SVGフォントを使ったソリューション




カラーやアニメーションなどのSVG機能を活用したスケーラブ
ルな絵文字フォントを作成可能
既存フォントをSVG絵文字フォント
で拡張して利用
Unicode 6.0未対応のシステム
でも正規の符号が利用可能
Unicode 6.0の絵文字



日本の携帯電話由来の722文字
ケータイ小説の表示に不可欠
従来のフォントを超える表現力を
要求（現状はビットマップ形式）

18. 異体字とSVGフォント

SVGフォントを使ったソリューション




異体字未対応のシステムで必要な異体字のみを提供
既存フォントをSVG異体字フォントで拡張して利用
異体字のUnicode属性値にはIVSシーケンスを設定
[例] 葛飾区と


城市
符号位置はどちらも
U+845Bに統合
異体字セレクタで区別
U+E0101
U+E0100
<svg xmlns="http://www.w3.org/2000/svg"
width="100" height="100">
<defs>
<font horiz-origin-x="0"
horiz-adv-x="1000" id="IPAMincho">
<font-face font-family="IPAMincho"
units-per-em="1000" ascent="880"
descent="120"/>
<glyph unicode="&#x845B;&#xE0100;"
glyph-name ="Katsura"
vert-origin-y="786"
vert-adv-y="870"
d="M505 683 Q512 642 512 585…"/>
</font>
</defs>
</svg>

19. 符号のない外字とSVGフォント

SVGフォントを使ったソリューション




書体ごとにSVG外字フォントを提供（[例] IPAMincho.svg）
外字の識別名でフォントファミリを定義（[例] HiraganaNO）
外字のUnicode属性値には下駄記号（U+3013）を常に設定
HTMLからの参照



外字の表示位置に
下駄記号を記述
外字に対応するフォ
ントファミリを指定
該当グリフがない時
は下駄文字が表示
<html
xmlns="http://www.w3.org/1999/xhtml">
<head><style>
@font-face {
font-family:HiraganaNO;
src:url("IPAMincho.svg#HiraganaNO");
}
</style></head>
<body>
<div style="font-size:100px;">SVG外字
<span style="font-family:HiraganaNO;">
&#x3013;</span>表示
</div>
</body>
</html>

20. WOFFフォントとSVGフォント

二者択一ではなく使い分け



一般的なWebフォントの用途にはWOFFフォントが最適
コンテンツ固有の外字などにはSVGフォントが有効
SVGフォントの魅力はコストパフォーマンスと柔軟性
アニメーション
OpenType機能
表示品位
WOFFフォント
SVGフォント
ヒンティング
文字として挙動
スケーラブル
イメージ文字
利用コスト

21. OpenTypeとSVGの融合

OpenTypeの拡張アイデア



OpenTypeフォントの完成度と機能
にSVGフォントの表現力をプラス
SVG Glyphs for OpenType
W3Cコミュニティグループが発足
www.w3.org/community/svgopentype/
SVGグリフテーブルの仕様案



'SVG 'テーブルを新規に追加して
UTF-8テキストのSVGデータを格納
Adobeが2011年6月に仕様提案
Mozillaも独自の改良案を提案して
Firefoxでの実装をスタート
wiki.mozilla.org/SVGOpenTypeFonts