Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebフォントとSVGフォント

11,803 views

Published on

Published in: Technology
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes.........ACCESS WEBSITE Over for All Ebooks ..... (Unlimited) ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×