WebフォントとSVGフォント

10,367 views

Published on

Published in: Technology

WebフォントとSVGフォント

  1. 1. WebフォントとSVGフォント 2012年3月8日 W3C SVG WG 藤沢 淳 fujisawa.jun@canon.co.jp
  2. 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. 3. Webフォントサービス  欧文フォントサービス    Adobeが買収した代表的なWeb フォントサービスのTypeKit typekit.com/ Monotype、Linotype、ITCの フォントが使えるFonts.com webfonts.fonts.com/ 和文フォントサービス   フォントワークス、イワタ、モトヤが ソフトバンクと提携したFONT+ webfont.fontplus.jp/ DNPの秀英体が使えるデコもじ decomoji.jp/
  4. 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. 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. 6. 異体字のサポート  東アジア言語対応    font-variant-east-asianプロパティーを導入 OpenType機能タグのjis78、jis83、jis90、jis04、smpl、 trad、fwid、 pwidを指定可能 異体字の使用例  JIS78字形(jis78)  プロポーショナル字形(pwid) ■ 旧字体(trad)
  7. 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. 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. 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. 10. SVGとSVGフォント  SVGの概要    PDF相当の描画機能とFlash相当のアニメー ション機能を備えたベクトルグラフィック形式 www.w3.org/TR/SVG/ 広義のHTML5の一部でありすべての主要 Webブラウザで利用可能 SVGフォントとは    ベジェ曲線で定義されたグリフにTrueTypeフォント相当の メタデータを加えたSVGベースのフォントフォーマット カラー、グラデーション、アニメーションなど任意のSVG描画 機能を利用したスケーラブルなフォント定義が可能 zlib圧縮による圧縮SVG形式(.svgz)での配布に対応
  11. 11. SVGフォントの活用例  アイコンフォント作成サービス   選択したアイコンをのみを含む SVGフォントをオンラインで作成 できるFontomas nodeca.github.com/fontomas/ 行政機関向け文字情報基盤   戸籍統一文字や住基ネットワーク 統一文字を網羅した58,712文字を 含むIPAmj明朝フォントを提供 ossipedia.ipa.go.jp/ipamjfont/ Webで閲覧可能な文字情報一覧表 においてSVGグリフデータを公開
  12. 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. 13. SVGフォントの描画品位  SVGフォントの描画サンプル  people.mozilla.org/~jdaggett/tests/svgfonttest.html Mac OS XプラットフォームのSafariで描画
  14. 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. 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>SVG </div> </body> </html>
  16. 16. 外字とSVGフォント  外字のカテゴリ     JIS X 0208に含まれない表外字(絵文字など) 同じ符号位置を持つが字形の異なる異体字 符号位置を持たない文字やグラフィックイメージ 外字に対するニーズ変化     昔のベンダー定義文字(NEC特殊文字やIBM 拡張文字)はUnicode標準の一部として共通化 携帯電話の絵文字もUnicode 6.0に収録済 電子政府の戸籍データ処理では異体字が課題 EPUBなどの電子出版では出版物に依存して ごく少数出現する符号化できない文字が課題
  17. 17. 絵文字とSVGフォント  SVGフォントを使ったソリューション     カラーやアニメーションなどのSVG機能を活用したスケーラブ ルな絵文字フォントを作成可能 既存フォントをSVG絵文字フォント で拡張して利用 Unicode 6.0未対応のシステム でも正規の符号が利用可能 Unicode 6.0の絵文字    日本の携帯電話由来の722文字 ケータイ小説の表示に不可欠 従来のフォントを超える表現力を 要求(現状はビットマップ形式)
  18. 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="葛󠄀" glyph-name ="Katsura" vert-origin-y="786" vert-adv-y="870" d="M505 683 Q512 642 512 585…"/> </font> </defs> </svg>
  19. 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;"> 〓</span>表示 </div> </body> </html>
  20. 20. WOFFフォントとSVGフォント  二者択一ではなく使い分け    一般的なWebフォントの用途にはWOFFフォントが最適 コンテンツ固有の外字などにはSVGフォントが有効 SVGフォントの魅力はコストパフォーマンスと柔軟性 アニメーション OpenType機能 表示品位 WOFFフォント SVGフォント ヒンティング 文字として挙動 スケーラブル イメージ文字 利用コスト
  21. 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

×