User Defined Characters and SVG Fonts

User Defined Characters and SVG Fonts August 4, 2010 Jun Fujisawa [email_address]

User Defined Characters ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Web Fonts Overview ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Referencing Web Fonts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],@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+1 E 00-1 FFF , U+2000-2300 ; }

New in CSS Fonts Level 3 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Handling Variations ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

WOFF Font Format ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

SVG Fonts Overview ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Defining SVG Fonts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<defs> <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="…"> <missing-glyph d="…"> </font-face> </defs> <text font-family="Vera" font-size="100">SVG</text> <defs> <font-face font-family="Vera"> <font-face-src> <font-face-uri xlink:href="Vera.svg#f"/> </font-face-src> </font-face> </defs> <text font-family="Vera" font-size="100">SVG</text>

New in SVG Tiny 1.2 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Web Fonts Implementations ,[object Object],[object Object],   Chrome   Opera   Firefox  WebKit  Safari IE9  IE9 IE SVG WOFF EOT TrueType OpenType Web Browser

Solution Using SVG Fonts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Extending Existing Fonts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],@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; } body { font-family: Helvetica; } <html> <body> SVG </body> </html>

Glyphs without Code Points ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<defs> <font-face font-family="Vera" units-per-em="1000"> <glyph unicode="&edanashi;" glyph-name="edanashi" d="…"> <missing-glyph d="…"> </font-face> </defs> <text font-family="Vera" font-size="100">&edanashi;</text> body { font-family: Vera; } <html> <body> Edanashi in HTML: <img src="edanashi.svg#f/> <svg> <text>Edanashi in SVG: &edanashi;</text> </svg> </body> </html>

User Defined Characters and SVG Fonts

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Similar to User Defined Characters and SVG Fonts

Similar to User Defined Characters and SVG Fonts (20)

More from Jun Fujisawa

More from Jun Fujisawa (8)

Recently uploaded

Recently uploaded (20)

User Defined Characters and SVG Fonts