OpenTypeカラーフォントと 関連技術の動向

2014年7月30日

W3C SVG WG 藤沢 淳 fujisawa.jun@canon.co.jp

カラーフォントの関連技術

Webフォント SVGグラフィック

絵文字フォント OpenType

カラーフォント

W3C CSS Fonts Level 3

W3C WOFF 2.0

Unicode 7.0

W3C SVG 2.0

W3C Web Animation 1.0

MPEG OFF 3rd Edition

❶ ❷

❸ ❹

❶Webフォントの概要

p Webフォントとは n  CSSフォント機構（@font-face）によりWeb

ブラウザからダウンロード表示可能なフォント n  対応フォントフォーマットはOpenType、SVG

フォント、WOFFフォントなど

p Webフォントサービス n  Adobeが買収した代表的なWeb

フォントサービスのTypeKit typekit.com/

n  フォントワークス、イワタ、モトヤがソフトバンクと提携したFONTPLUS webfont.fontplus.jp/

Webフォント時代の新書体 p AdobeとGoogleがSource Han Sansを公開（７月16日）

n  Adobe-Japan1-6の全グリフとAdobe-Japan1 IVSesのIVS対応の異体字を含む50万グリフを7つのウエイトで提供

Webフォントの最新仕様 p WebフォントのW3C標準仕様

n  CSS Level 2において1998年に導入 www.w3.org/TR/CSS2/

n  CSS Fonts Level 3が策定中（勧告候補） www.w3.org/TR/css3-fonts/

p おもな機能 n  ダウンロードフォント、ローカルフォント、システムフォントに対応 n  ファミリ（font-family）、ウェイト（font-weight）、字幅（font-

stretch）、スタイル（font-style）、サイズ（font-size）を定義 n  フォント選択のためのマッチングのアルゴリズムを規定

CSS Fonts Level 3の新機能 p 対応フォーマットを整理

n  WOFFフォント（.woff）、TrueTypeフォント（.ttf）、OpenTypeフォント（.ttf/.otf）、Embedded OpenType フォント（.eot）、SVGフォント（.svg）の5種類

p OpenType機能のサポート n  カーニング（font-kerning）、上付き・下付き（font-variant-

position）、リガチャ（font-variant-ligatures）、キャピタライズ（font-variant-caps）、数字（font-variant-numeric）、スワッシュ（font-variant-alternates）などに対応

p 同一オリジン制限の導入 n  原則はWebフォントと同一サイトのWebページのみ利用許可 n  クロスオリジンリソース共有（CORS）による制限緩和も可能

異体字のサポート p 東アジア言語対応

n  font-variant-east-asianプロパティーを導入 n  OpenType機能タグのjis78、jis83、jis90、jis04、smpl、

trad、fwid、 pwidを指定可能

p 異体字の使用例 n  JIS78字形（jis78） ■ 旧字体（trad） n  プロポーショナル字形（pwid）

WOFFフォントの最新仕様 p WOFFフォントのW3C標準仕様

n  Web Open Font Formatの略称 n  Microsoft、Mozilla、Operaの提案を

ベースにWOFF 1.0が完成（2012年12月） n  WOFF File Format 2.0が策定中

www.w3.org/TR/WOFF2F/

p おもな機能 n  Google提案のBrotli圧縮に対応したTrueType/OpenTyp

eフォントのWebフォント専用のパッケージング形式 n  ライセンス情報などを記述するXML拡張メタデータブロックと

任意のデータを格納可能なプライベートデータブロックを定義 n  DRM著作権管理機能は提供しない（WOFFフォントをOSの

システムフォントとして再利用することは困難）

❷SVGグラフィックの概要

p SVGグラフィックとは n  PDF相当の描画機能とFlash相当のアニメー

ション機能を備えたベクトルグラフィック形式 www.w3.org/TR/SVG/

n  広義のHTML5の一部でありすべての主要 Webブラウザで表示が可能

p SVGフォント機能 n  ベジェ曲線で定義されたグリフにTrueTypeフォント相当の

メタデータを加えたSVGベースのフォントフォーマット n  カラー、グラデーション、アニメーションなど任意のSVG描画

機能を利用したスケーラブルなフォント定義が可能

n  複雑系言語のレイアウト機能とヒンティング機能には未対応

SVG標準化の歴史

p SVG 1.0の誕生から12年が経過

SVG 1.0

SVG Tiny 1.2

SVG 1.1 2nd Edition

1998 2000 2002 2004 2006 2008 2010 2012

SVG 1.1

SVG 2.0

キヤノンが SVG WGに参加

HTML5/CSS3との整合性を向上させた策定中の最

新仕様

HTML5対応の最新Webブラウザで広く実装済、現時点で最も推奨される

仕様

モバイル向けサブセット仕様、携帯機器のフルブラウザ搭載によりニーズ

低下

2001年9月にSVG 1.0がW3C勧告

SVG 2.0標準化のロードマップ

p  2014年8月勧告を目標に策定中（遅延の見込み）

SVG WGがW3C勧告仕様化をコミットする

SVGコア仕様

CSS WGとのジョイント活動（FX TF）で策定するSVG/CSS共

通仕様

上記以外のSVG拡張モジュール仕様

①

②

③

SVGスムーズグラデーション機能 p ベジェ曲線を用いて記述する高度なグラデーション機能

フォトリアルなイラスト表現を可能にする機能

Illustratorのグラディエントメッシュ機能と

同様の技術、Inkscapeでの実装が進行中

SVGフィルター効果機能 p 従来のSVGフィルター効果の表現力を大幅に向上

OpenGLのプログラマブルシェーダー機能を活用してリアルで高度なビジュアル

効果の高速描画を実現

Adobe提案のCSS Shader仕様をSVGにも適用できるよう拡張、Filter Effects仕様としてSVG/CSS共通仕様化

Webアニメーション機能 p 従来のSVGアニメーション機能に代わる新仕様

SMILベースのSVG Animation仕様とCSS Animation仕様のアニ メーションモデルと機

能セットを統合化

Web Animation仕様の最初のドラフト仕様が公開（2014年6月）、FirefoxおよびWebKitでの実装が進行中

❸絵文字フォントの概要 p 絵文字フォントとは

n  携帯電話やスマートフォンで利用 されるカラー絵文字を文字セットと するアイコン文字フォント

n  iOS 5ではApple Color Emoji フォント、Windows 8.1では Segoe UI Emojiフォントが導入

p 絵文字コミュニケーション n  欧米のSNSやメッセージングにおい

てこの1～2年で絵文字が広く普及 n  デコメールやLINEスタンプではアニ

メーション対応や表現力向上へ

絵文字フォントの互換性 p モバイル環境の絵文字

n  これまではキャリヤごとに異なる 絵文字セットが使用されてきた

n  通信キャリア6社の絵文字が 2014年5月以降に統一の動き

p  PC・Web環境の絵文字 n  OS X　Lion、Windows 8.1

以降がカラー絵文字に対応 n  Google日本語入力も絵文字に

対応してChromeブラウザや Android機器でも利用可能に

Unicode仕様と絵文字 p 絵文字は国際標準

n  通信キャリア3社の絵文字統合仕様を GoogleとAppleが提案（2008年11月）

n  Unicode 6.0に約1,000個の絵文字 が正式に収録（2010年10月）

n  ただし例示字形はカラーに未対応

p Unicodeの最新仕様 n  Unicode仕様の4年振りの改定となる

Unicode 7.0が発表（2014年6月） n  気象関係やハンドサインなど約250個

の新しい絵文字が追加

絵文字フォントのフォーマット p  iOSの絵文字フォント

n  PNG画像を"sbix"テーブルに格納した独自のフォント仕様 n  グリフデータはビットマップなので拡大縮小や印刷には不向き

p スケーラブルなSVGフォント n  ベジェ曲線でグリフを記述するスケーラブル

なフォントフォーマット（SVG仕様の一部） n  カラー、グラデーション、アニメーションなど

SVGの豊富な描画機能を利用可能

n  複雑系言語レイアウトへの対応が不十分 n  Microsoft IEとFirefoxが未対応（SVG 2.0

ではSVGフォントからWOFFフォントへ移行）

❹OpenTypeカラーフォントの概要

p OpenTypeカラーフォントとは n  カラー絵文字フォントを表現可能

なOpenTypeフォントの拡張仕様 n  高品位印刷や電子書籍での利用

を想定したスケーラブルフォント n  アニメーション表現や多色表現（グラデーション）をサポート

p OpenType仕様の拡張 n  従来のOpenTypeフォント仕様にカラーフォント

機能をサポートするための新しいテーブルを追加 n  カラーフォント機能に未対応の実装ではモノクロ

描画へのフォールバックが可能 n  SVGを利用するSVG in OpenType仕様として検討開始

SVG in OpenTypeの標準化 p W3Cコミュニティグループ発足（2011年10月）

n  SVG WGミーティングでAdobeのSairus Patelが提案

n  W3CとOpenType関係者をつなぐコミュニティグループを結成 www.w3.org/community/svgopentype/

p コミュニティグループ仕様公開（2013年10月） n  Adobeが最初の仕様案を作成 n  Mozillaが改良案を提案すると

共にFirefox 26で実装を提供 n  SVG Glyphs in OpenType

仕様を最終レポートとして公開 www.w3.org/2013/10/ SVG_in_OpenType/

MPEG OFFカラーフォントの標準化 p カラーフォント技術の提案募集

n  OpenTypeの国際標準であるMPEG Open Font Format 3rd Edition向け にカラーフォントと数式レイアウト技術を募集（2013年11月）

n  W3C、Google、Microsoftがそれぞれの仕様案を提案

p 標準化のスケジュール n  MPEG 108会合で3つの提案すべて

を融合する形で採用決定して委員会 ドラフトが公開（2014年4月）

n  次回MPEG 109会合前にISO投票 が完了する予定（2014年7月）

SVG in OpenTypeフォント仕様 p グリフ定義はSVG

n  "SVG "テーブルにグリフIDとSVGグリフデータを記述 n  カラーパレット（"CPAL"テーブル）のカラー定義を参照可能 n  SVGアニメーション（SVG 2.0ではWebアニメーション仕様を

採用予定）を利用可能、スクリプト、外部参照、リンクは不可

p グリフ定義以外はOpenType n  エンコーディング、レイアウト、

複雑テキスト、異体字などグリフ 定義以外は通常のOpenType

n  SVGグリフに未対応の実装は CFF/TTグリフへのフォール バックが可能

Google PNGカラーフォント仕様 p グリフ定義はPNG画像

n  PNG画像はsRGB 32ビットのBGRAフォーマット n  "CBDT"テーブルにPNG形式のビットマップデータを格納 n  "CBLC"テーブルにビットマップデータの位置情報を記述

p シンプルで実装が容易 n  OpenTypeエンジンFreeType 2.5

の実装をGoogleが提供（2013年6月） n  Android 4.4で導入されたカラー

絵文字機能で採用（2013年10月） n  Firefox for Androidにおいても

サポートされる予定（ベータ版公開中）

Microsoftカラーフォント仕様 p グリフ定義はアウトライン

n  個々にカラーを設定した複数の アウトラインデータを重ねて描画 するマルチレイヤー方式

n  カラー設定をカラーパレット （"CPAL"テーブル）で定義

p Microsoftが推進 n  Windows 8.1で導入されたカラー

絵文字機能で採用（2013年10月） n  Segoe UI Emojiフォントを提供 n  FontCreater 7.5など代表的な

フォント編集ツールも対応開始

アニメーションフォントの可能性 p カラーアニメーション絵文字

n  グラデーションなど高度な描画機能を活用 した付加価値の高いアニメーション絵文字

n  パレットでカラースキームを変更できる絵文字 p 手書き文字フォント

n  書き順をアニメーション表示するフォント n  手書きストロークから手書き文字フォント生成

p テキスト表示効果 n  飾り文字やマウス操作やタッチ操作に反応

して色や形が変化するテキスト表示効果 n  テキスト編集時に文字が震える表示効果など