![異体字と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>](https://image.slidesharecdn.com/websvg-131018170527-phpapp02/85/Web-SVG-18-320.jpg)
![符号のない外字と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(/slideshow/web-27346698/27346698/"IPAMincho.svg);
}
</style></head>
<body>
<div style="font-size:100px;">SVG外字
<span style="font-family:HiraganaNO;">
〓</span>表示
</div>
</body>
</html>](https://image.slidesharecdn.com/websvg-131018170527-phpapp02/85/Web-SVG-19-320.jpg)
奥别产フォントと厂痴骋フォント
- 1. 奥别产フォントと厂痴骋フォント 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フォントサービスがスタート
- 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）による制限緩和も可能
- 7. Webフォントの使い方 ? マルチウェイトフォント ? ? ? ? ウェイトごとにルールを記述 ローカルフォントのソースは localでフォント名を指定 ダウンロードフォントはurlで ダウンロード元を指定 複合フォントの定義 ? ? ? ? 言語ごとにルールを記述 "-"でUnicode範囲を指定 "?"は任意の数字にマッチ 必要最小限のフォントファイ ルのみをダウンロード可能 @font-face { font-family: Helvetica; src: local(Helvetica), url(/slideshow/web-27346698/27346698/fonts/Helvetica.ttf); } @font-face { font-family: Helvetica; font-weight: bold; src: local("Helvetica Bold"), url(/slideshow/web-27346698/27346698/fonts/HelveticaBold.ttf); } @font-face { font-family: DroidSans; src: url(/slideshow/web-27346698/27346698/DroidSansJp.woff); unicode-range: U+3000-9FFF, U+FF??; } @font-face { font-family: DroidSans; src: url(/slideshow/web-27346698/27346698/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のシ ステムフォントとして再利用することは困難）
- 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機能やヒンティングには未対応
- 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(/slideshow/web-27346698/27346698/HelveticaEx01.svg); unicode-range:U+E758; } @font-face { font-family:Helvetica; src:url(/slideshow/web-27346698/27346698/HelveticaEx02.svg); unicode-range:U+E759; } <html> <body style="font-family:Helvetica;"> <div>SVG </div> </body> </html>
- 16. 外字とSVGフォント ? 外字のカテゴリ ? ? ? ? JIS X 0208に含まれない表外字（絵文字など） 同じ符号位置を持つが字形の異なる異体字 符号位置を持たない文字やグラフィックイメージ 外字に対するニーズ変化 ? ? ? ? 昔のベンダー定義文字（NEC特殊文字やIBM 拡張文字）はUnicode標準の一部として共通化 携帯電話の絵文字もUnicode 6.0に収録済 電子政府の戸籍データ処理では異体字が課題 EPUBなどの電子出版では出版物に依存して ごく少数出現する符号化できない文字が課題
- 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. 符号のない外字と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(/slideshow/web-27346698/27346698/"IPAMincho.svg); } </style></head> <body> <div style="font-size:100px;">SVG外字 <span style="font-family:HiraganaNO;"> 〓</span>表示 </div> </body> </html>
- 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