Enviar pesquisa
Carregar
WebフォントとSVGフォント
•
23 gostaram
•
13,144 visualizações
Jun Fujisawa
Seguir
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 21
Baixar agora
Baixar para ler offline
Recomendados
OpenTypeカラーフォントと関連技術の動向
OpenTypeカラーフォントと関連技術の動向
Jun Fujisawa
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
HTML5時代の技術の恩恵を受けるには
HTML5時代の技術の恩恵を受けるには
Sho Ito
CSSにもオブジェクト指向を - OOCSSことはじめ
CSSにもオブジェクト指向を - OOCSSことはじめ
Nisei Kimura
集合知プログラミング 第6章 ドキュメントとフィルタリング~draft
集合知プログラミング 第6章 ドキュメントとフィルタリング~draft
Kenji Koshikawa
テスト環境から本番環境へ、URLが異なる環境にWordPressを移行する方法
テスト環境から本番環境へ、URLが異なる環境にWordPressを移行する方法
Ryujiro Yamamoto
ディレクターからみたMovable Type + PowerCMSの優位性
ディレクターからみたMovable Type + PowerCMSの優位性
Renji Yoneda
シロクマ本に学ぶエクスペリエンスのための手技法 by 篠原 稔和 - presentation from IA CAMP 2015
シロクマ本に学ぶエクスペリエンスのための手技法 by 篠原 稔和 - presentation from IA CAMP 2015
Sociomedia
Recomendados
OpenTypeカラーフォントと関連技術の動向
OpenTypeカラーフォントと関連技術の動向
Jun Fujisawa
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
HTML5時代の技術の恩恵を受けるには
HTML5時代の技術の恩恵を受けるには
Sho Ito
CSSにもオブジェクト指向を - OOCSSことはじめ
CSSにもオブジェクト指向を - OOCSSことはじめ
Nisei Kimura
集合知プログラミング 第6章 ドキュメントとフィルタリング~draft
集合知プログラミング 第6章 ドキュメントとフィルタリング~draft
Kenji Koshikawa
テスト環境から本番環境へ、URLが異なる環境にWordPressを移行する方法
テスト環境から本番環境へ、URLが異なる環境にWordPressを移行する方法
Ryujiro Yamamoto
ディレクターからみたMovable Type + PowerCMSの優位性
ディレクターからみたMovable Type + PowerCMSの優位性
Renji Yoneda
シロクマ本に学ぶエクスペリエンスのための手技法 by 篠原 稔和 - presentation from IA CAMP 2015
シロクマ本に学ぶエクスペリエンスのための手技法 by 篠原 稔和 - presentation from IA CAMP 2015
Sociomedia
Webアクセシビリティの標準規格「JIS X 8341-3:2010」準拠のための試験方法(最新版)
Webアクセシビリティの標準規格「JIS X 8341-3:2010」準拠のための試験方法(最新版)
Web Accessibility Infrastructure Committee (WAIC)
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
Yuji Nojima
レコメンデーション(協調フィルタリング)の基礎
レコメンデーション(協調フィルタリング)の基礎
Katsuhiro Takata
Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!
Marie Suenaga
-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう
nico0927
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
ウェブデザインの本質と、構成要素
ウェブデザインの本質と、構成要素
vanillate cocoa
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
樽八 仲川
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
Hayato Mizuno
Webライティング11のルール
Webライティング11のルール
Tsutomu Sogitani
これくらいはやってほしいWebデザイン
これくらいはやってほしいWebデザイン
Yuya Takahashi
PHP7で変わること ——言語仕様とエンジンの改善ポイント
PHP7で変わること ——言語仕様とエンジンの改善ポイント
Yoshio Hanawa
concrete5デザインカスタマイズに必要なPHPの知識
concrete5デザインカスタマイズに必要なPHPの知識
Hishikawa Takuro
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Yasuhisa Hasegawa
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
Attractive HTML5
Attractive HTML5
Sho Ito
TypeTalks第10回「もっと知りたい!Webフォント」
TypeTalks第10回「もっと知りたい!Webフォント」
Kosuke Yamada
Mais conteúdo relacionado
Destaque
Webアクセシビリティの標準規格「JIS X 8341-3:2010」準拠のための試験方法(最新版)
Webアクセシビリティの標準規格「JIS X 8341-3:2010」準拠のための試験方法(最新版)
Web Accessibility Infrastructure Committee (WAIC)
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
Yuji Nojima
レコメンデーション(協調フィルタリング)の基礎
レコメンデーション(協調フィルタリング)の基礎
Katsuhiro Takata
Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!
Marie Suenaga
-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう
nico0927
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
ウェブデザインの本質と、構成要素
ウェブデザインの本質と、構成要素
vanillate cocoa
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
樽八 仲川
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
Hayato Mizuno
Webライティング11のルール
Webライティング11のルール
Tsutomu Sogitani
これくらいはやってほしいWebデザイン
これくらいはやってほしいWebデザイン
Yuya Takahashi
PHP7で変わること ——言語仕様とエンジンの改善ポイント
PHP7で変わること ——言語仕様とエンジンの改善ポイント
Yoshio Hanawa
concrete5デザインカスタマイズに必要なPHPの知識
concrete5デザインカスタマイズに必要なPHPの知識
Hishikawa Takuro
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Yasuhisa Hasegawa
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
Destaque
(20)
Webアクセシビリティの標準規格「JIS X 8341-3:2010」準拠のための試験方法(最新版)
Webアクセシビリティの標準規格「JIS X 8341-3:2010」準拠のための試験方法(最新版)
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
レコメンデーション(協調フィルタリング)の基礎
レコメンデーション(協調フィルタリング)の基礎
Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!
-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
ウェブデザインの本質と、構成要素
ウェブデザインの本質と、構成要素
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
コーディングが上達するコツ
コーディングが上達するコツ
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
WordPressプラグイン作成入門
WordPressプラグイン作成入門
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
Webライティング11のルール
Webライティング11のルール
これくらいはやってほしいWebデザイン
これくらいはやってほしいWebデザイン
PHP7で変わること ——言語仕様とエンジンの改善ポイント
PHP7で変わること ——言語仕様とエンジンの改善ポイント
concrete5デザインカスタマイズに必要なPHPの知識
concrete5デザインカスタマイズに必要なPHPの知識
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Semelhante a WebフォントとSVGフォント
Attractive HTML5
Attractive HTML5
Sho Ito
TypeTalks第10回「もっと知りたい!Webフォント」
TypeTalks第10回「もっと知りたい!Webフォント」
Kosuke Yamada
H T M L5 入門編
H T M L5 入門編
ngi group.
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
Web Technology Meeting
Web Technology Meeting
dynamis
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
Gadgetで実現する新世代UI/UX
Gadgetで実現する新世代UI/UX
FatWireKK
Firefox OSアプリの概要@gunma.web
Firefox OSアプリの概要@gunma.web
Hayato Hiratori
HTML5 + Firefox OS
HTML5 + Firefox OS
dynamis
Html5 seminar 1_pac
Html5 seminar 1_pac
1PAC. INC.
HTML5 OS
HTML5 OS
dynamis
WebとIE10とWindows 8
WebとIE10とWindows 8
Microsoft
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
満徳 関
IE10とWindows 8とHTML5
IE10とWindows 8とHTML5
Microsoft
Heroku meetup#11(フル)
Heroku meetup#11(フル)
Hideki Ohkubo
HTML5でゲームが作れます
HTML5でゲームが作れます
amusementcreators
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
Shinyu Murakami
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
Developers Summit
パンダの会 Html5概説
パンダの会 Html5概説
Masakazu Muraoka
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
Monaca
Semelhante a WebフォントとSVGフォント
(20)
Attractive HTML5
Attractive HTML5
TypeTalks第10回「もっと知りたい!Webフォント」
TypeTalks第10回「もっと知りたい!Webフォント」
H T M L5 入門編
H T M L5 入門編
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Web Technology Meeting
Web Technology Meeting
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
Gadgetで実現する新世代UI/UX
Gadgetで実現する新世代UI/UX
Firefox OSアプリの概要@gunma.web
Firefox OSアプリの概要@gunma.web
HTML5 + Firefox OS
HTML5 + Firefox OS
Html5 seminar 1_pac
Html5 seminar 1_pac
HTML5 OS
HTML5 OS
WebとIE10とWindows 8
WebとIE10とWindows 8
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
IE10とWindows 8とHTML5
IE10とWindows 8とHTML5
Heroku meetup#11(フル)
Heroku meetup#11(フル)
HTML5でゲームが作れます
HTML5でゲームが作れます
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
パンダの会 Html5概説
パンダの会 Html5概説
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
Mais de Jun Fujisawa
OpenTypeカラーフォントの標準化
OpenTypeカラーフォントの標準化
Jun Fujisawa
HTTP 2.0のヘッダ圧縮(HPACK)
HTTP 2.0のヘッダ圧縮(HPACK)
Jun Fujisawa
SVG標準化の最新動向
SVG標準化の最新動向
Jun Fujisawa
SVGフォントを使った外字表現
SVGフォントを使った外字表現
Jun Fujisawa
User Defined Characters Solution Proposal
User Defined Characters Solution Proposal
Jun Fujisawa
User Defined Characters and SVG Fonts
User Defined Characters and SVG Fonts
Jun Fujisawa
RobinとWidgeon
RobinとWidgeon
Jun Fujisawa
WebアプリプラットフォームとしてのHTML5とSVG
WebアプリプラットフォームとしてのHTML5とSVG
Jun Fujisawa
Mais de Jun Fujisawa
(8)
OpenTypeカラーフォントの標準化
OpenTypeカラーフォントの標準化
HTTP 2.0のヘッダ圧縮(HPACK)
HTTP 2.0のヘッダ圧縮(HPACK)
SVG標準化の最新動向
SVG標準化の最新動向
SVGフォントを使った外字表現
SVGフォントを使った外字表現
User Defined Characters Solution Proposal
User Defined Characters Solution Proposal
User Defined Characters and SVG Fonts
User Defined Characters and SVG Fonts
RobinとWidgeon
RobinとWidgeon
WebアプリプラットフォームとしてのHTML5とSVG
WebアプリプラットフォームとしてのHTML5とSVG
Último
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Último
(7)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
WebフォントとSVGフォント
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>SVG </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="葛󠄀" 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;"> 〓</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
Baixar agora