フォントをつくるサイトで使ったCanvasとSVGの話 @HTML5飯
Download as PPTX, PDF•7 likes•2,530 views
HTML5飯 in 横浜 at 2014.6.21 にてお話させていただいた際の資料です。 FONTA（http://fonta.kayac.com）の制作に 用いた技術を中心に解説しています。
![[
{
weight : "S", // 線の太さ（ S / M / L ）
path : [{ x : 10, y : 5 }, { x : 10, y : 5 } ..] // 筆跡ポイントの配列
},
{
weight : "M", // 線の太さ（ S / M / L ）
path : [{ x : 10, y : 5 }, { x : 10, y : 5 } ..] //筆跡ポイントの配列
}
…
]
筆跡アニメーションのデータ形式](https://image.slidesharecdn.com/html5-140621102922-phpapp01/85/Canvas-SVG-HTML5-18-320.jpg)
フォントをつくるサイトで使ったCanvasとSVGの話 @HTML5飯
- 3. 最近つくったもの
- 6. 本日紹介するもの
- 8. フォントを「書く」機能！
- 11. M212.3 673.7C200.9 678.4 186.8 679.1 178.0 ….. C464.3 891.6 461.3 879.6 461.3 879.6z SVGのPath形式 参考： 10分でわかるSVG 基礎編 - ＠IT http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html 開始点の移動 → m M 直線 → l L 水平線 → h H 垂直線 → v V 二次ベジェ曲線 → q Q …
- 12. フォントを「つくる」仕組み！
- 13. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <font id="FONTA" horiz-adv-x="1024" vert-adv-y="1024" > ….（略） <glyph unicode="Ī" d="M0 0" /> <glyph unicode="Ī" d="M0 0" /> ….（略） </font> </defs> </svg> SVGフォントのフォーマット 参考： svg要素の基本的な使い方まとめ http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_16.htm 文字の数の分、繰り返されている
- 15. SVGフォントから、.ttf .eot .woff への変換 http://fontforge.org/ja/ < サーバサイドのお仕事です。 @Konboi
- 16. フォントを「見る」演出！
- 18. [ { weight : "S", // 線の太さ（ S / M / L ） path : [{ x : 10, y : 5 }, { x : 10, y : 5 } ..] // 筆跡ポイントの配列 }, { weight : "M", // 線の太さ（ S / M / L ） path : [{ x : 10, y : 5 }, { x : 10, y : 5 } ..] //筆跡ポイントの配列 } … ] 筆跡アニメーションのデータ形式
- 20. ご清聴ありがとうございました。