際際滷

際際滷Share a Scribd company logo
皆閣赫フォントを聞った翌忖燕
2011定1埖27晩

W3C SVG WG 儲g 款
fujisawa.jun@canon.co.jp
翌忖とは採か
?

翌忖のカテゴリ
?
?
?

?

JIS X 0208に根まれない燕翌忖┰}猟忖など
揖じ憲催了崔を隔つが忖侘のなる悶忖
憲催了崔を隔たない猟忖やグラフィックイメ`ジ

翌忖にするニ`ズ篁
?
?
?
?

劣のベンダ`協x猟忖NEC蒙歩猟忖やIBM
猟忖はUnicode覆厘参燭箸靴胴架┿
亊。の}猟忖もUnicode 6.0にуhg
徨屓軒の汐デ`タI尖では悶忖がn}
EPUBなどの徨竃井では竃井麗に卆贋して
ごく富方竃Fする憲催晒できない猟忖がn}
翌忖I尖のn}
?

プライベ`トコ`ドの}
?
?
?
?

?

屡贋の憲催了崔を送喘した翌忖フォントによる猟忖晒け
Unicode暴喘I囃の旋喘による犹ミ\喘來の詰和
憲催了崔のない猟忖の燕幣には蹤吭議な憲催が駅勣
徨屓軒や徨竃井では嫌レいシステムgでネットワ`ク
を初した娼業の互い晩云Zデ`タ住Qが駅勣

フォントデ`タサイズとg廾コストの}
?
?
?

ごく富方の翌忖に鬉垢襪燭瓩縫轡好謄爐
猟忖鹿栽を寄することは否叟ではない
亊。C匂へのフルセットの謹忽Zフォント
デ`タの喜dはコスト議にも是y
悶忖への鬉砲牢鵑なg廾コストが駅勣
HTML5とWebフォント
?

HTML5の古勣
?

?

?

EPUB 3.0で駻池莇┐HTMLの10定尅り
の仟バ`ジョン2011定にLast Call嚠協
www.w3.org/TR/html5/
レxのHTML5はHTML5/CSS/SVG/WOFF
から撹されるOpen Web Platformを峺す

Webフォントとは
?
?
?

CSSフォントC@font-faceによりWeb
ブラウザからダウンロ`ド燕幣辛嬬なフォント
鬋侫ントフォ`マットはOpenType、SVG
フォント、WOFFフォントなど
EPUB徨汐のパッケ`ジにも鯉{辛嬬
SVGとSVGフォント
?

SVGの古勣
?

?

?

PDF犁韻涼荵C嬬とFlash犁韻離▲縫瓸`
ションC嬬を笋┐織戰トルグラフィック侘塀
www.w3.org/TR/SVG/
麼勣なWebブラウザとEPUB徨汐リ`ダ
がgHTML5鬉厘参殖

SVGフォントとは
?
?
?

ベジェ爆で協xされたグリフにTrueTypeフォント犁韻
メタデ`タを紗えたSVGベ`スのフォントフォ`マット
カラ`、グラデ`ション、アニメ`ションなど販吭のSVG宙鮫
C嬬を旋喘したスケ`ラブルなフォント協xが辛嬬
OpenTypeフォントの互業なC嬬やヒンティングには隆
SVGフォントの托zみ
?

SVGフォントの協x
?
?
?

?

¨font¨勣殆で畠悶、¨glyph¨
勣殆で?のグリフを協x
¨d¨奉來にベジェ爆を峰
¨unicode¨奉來に憲催了崔
を峺協┠催双を聞喘辛嬬

2つの托zみ圭隈
?
?

HTMLファイルにSVG
フォントをインライン峰
¨font-face-uri¨勣殆で
HTMLファイルから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>
屡贋フォントの
?

SVG翌忖の弖紗
?

?
?

?

@font-faceル`ルを}方
聞喘して屡贋フォントに翌忖
を弖紗協x
¨unicode-range¨プロパティ
でm喘憲催譴鰆原
瘁で協xしたル`ルが枠

フォントの旋喘
?
?

屡贋のシステムフォントと
と曝eなく旋喘辛嬬
マルチウェイトフォントや}栽
フォントも揖に協x辛嬬

@font-face {
font-family:Helvetica;
src:local(Arial);
}
@font-face {
font-family:Helvetica;
src:url(/slideshow/svg-27330083/27330083/HelveticaEx01.svg);
unicode-range:U+E758;
}
@font-face {
font-family:Helvetica;
src:url(/slideshow/svg-27330083/27330083/HelveticaEx02.svg);
unicode-range:U+E759;
}
<html>
<body
style="font-family:Helvetica;">
<div>&#xE758;SVG&#xE759;
</div>
</body>
</html>
}猟忖とSVGフォント
?

SVGフォントを聞ったソリュ`ション
?
?
?

?

カラ`やアニメ`ションなどのSVG宙鮫C嬬を試喘したスケ`
ラブルなSVG}猟忖フォントを戻工
屡贋フォントをSVG}猟忖フォント
でして旋喘
Unicode 6.0隆鬉離轡好謄
でも屎、侶催が旋喘辛嬬

Unicode 6.0の}猟忖
?
?
?

晩云の亊。喇栖の722猟忖
ケ`タイ弌hの燕幣に音辛之
愔瓦離侫ントを階える燕F薦を
勣箔━F彜はビットマップ侘塀
悶忖とSVGフォント
?

SVGフォントを聞ったソリュ`ション
?
?
?

?

悶忖隆鬉離轡好謄爐捻慴な悶忖のみを戻工
屡贋フォントをSVG悶忖フォントでして旋喘
悶忖のUnicode奉來、砲IVSシ`ケンスをO協

[箭] 乞曝と
?
?

廓偏

憲催了崔はどちらも
U+845Bにy栽
悶忖セレクタで曝e

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="&#x845B;&#xE0100;"
glyph-name ="Katsura"
vert-origin-y="786"
vert-adv-y="870"
d="M505 683 Q512 642 512 585´"/>
</font>
</defs>
</svg>
憲催のない翌忖とSVGフォント
?

SVGフォントを聞ったソリュ`ション
?
?
?

?

悶ごとにSVG翌忖フォントを戻工[箭] IPAMincho.svg
翌忖のRe兆でフォントファミリを協x[箭] HiraganaNO
翌忖のUnicode奉來、砲蕨托j催U+3013を械にO協

HTMLからの歌孚
?
?
?

翌忖の燕幣了崔に
和j催を峰
翌忖に鬉垢襯侫
ントファミリを峺協
輝グリフがないr
は和j猟忖が燕幣

<html
xmlns="http://www.w3.org/1999/xhtml">
<head><style>
@font-face {
font-family:HiraganaNO;
src:url(/slideshow/svg-27330083/27330083/"IPAMincho.svg);
}
</style></head>
<body>
<div style="font-size:100px;">SVG翌忖
<span style="font-family:HiraganaNO;">
&#x3013;</span>燕幣
</div>
</body>
</html>
Webブラウザの鮉r
?

Webフォントの肝弊旗淵侫`マットはWOFF
?

翌忖I尖C嬬の晒にはSVGフォント鬉瞞慴
Webブラウザ

TrueType
OpenType

EOT

WOFF

IE

IE9

a

IE9

Safari
Firefox
Opera
Chrome

a
a
a
a

WebKit

SVGフォント

a

a
a
a

a
a
Ad

More Related Content

Featured (20)

2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing
Search Engine Journal
?
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
?
Artificial Intelligence, Data and Competition C SCHREPEL C June 2024 OECD dis...
Artificial Intelligence, Data and Competition C SCHREPEL C June 2024 OECD dis...Artificial Intelligence, Data and Competition C SCHREPEL C June 2024 OECD dis...
Artificial Intelligence, Data and Competition C SCHREPEL C June 2024 OECD dis...
OECD Directorate for Financial and Enterprise Affairs
?
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
SocialHRCamp
?
2024 State of Marketing Report C by Hubspot
2024 State of Marketing Report C by Hubspot2024 State of Marketing Report C by Hubspot
2024 State of Marketing Report C by Hubspot
Marius Sescu
?
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
?
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
?
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
?
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
?
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
?
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
?
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
?
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
?
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
?
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
?
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
?
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
?
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
?
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
?
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
?
2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing
Search Engine Journal
?
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
?
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
SocialHRCamp
?
2024 State of Marketing Report C by Hubspot
2024 State of Marketing Report C by Hubspot2024 State of Marketing Report C by Hubspot
2024 State of Marketing Report C by Hubspot
Marius Sescu
?
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
?
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
?
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
?
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
?
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
?
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
?
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
?
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
?
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
?
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
?
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
?
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
?

皆閣赫フォントを聞った翌忖燕