CSS Nite in Ginza, Vol.68「HiDPI時代のFireworks」で実施したセッションのスライド動画です。 【セミナーフォローアップ】 http://r360studio.com/fireworks/cssnite-ginza68.html

6. 鷹野さん
をアイ ン
コ 化！

9. Fireworks

16. さて、アイコンをどう使おう？
ここからは、
森和恵が
担当します。

17. 松田さんのお話にもあったように
脱ビットマップ…ですよね
PNG GIF

18. そこで、SVG？

19. もうひとつ便利に
アイコンをフォントに変える

20. SVG→フォントに変換すると…

21. フォント(文字)だから
CSSで装飾が自由自在
• カラーもシャドウもOK
• 拡大/縮小OK

22. オリジナルのフォントは
Webフォントとして指定

23. Webフォントを準備する
@font-face { オリジナルフォント名を定義
font-family: 'takanofont';
src: url(takanofont.eot);
src: local(‘takanofont'),
url(takanofont. woff)
format('woff');
}

24. Webフォントを指定する
.icon{ CSSルールにオリジナルフォントを指定
font-family:takanofont;
color:red;
text-shadow:3px 3px black;
}

25. CSSスタイルを指定する
<td>t</td> “t”にCSSルールを指定
<td class="icon">t</td>

26. ソースコードの詳細は、
後日配布のsample.htmlを参照
※:before 疑似要素を使った方法も補足

27. オリジナルのフォントファイルを作る
woff eot

28. fw.png → SVG → フォント
woff eot

29. FireworkはSVG出力ができない

30. Aaron Beall Fireworks機能拡張 Export
Export.mxp
http://fireworks.abeall.com/extensions/commands/Export/

31. コマンド→書き出し→Export SVG

32. SVG→フォント変換のデータ準備
固有名をつけて
ページに分ける
※SVGファイル名を指定

33. SVG→フォント変換を 失敗しないコツ
パスの単純化
カンバスが
フォント領域
余白が必要

34. SVG→フォント変換を 失敗しないコツ
ストロークを塗りに変換
パスの合体 …などでベタ塗り黒に

35. SVG→フォントを IcoMoon(for ブラウザ)で
http://icomoon.io/app/

36. ①Import IconsでSVGファイルを指定
②Selectで出力対象を選択

37. Editで編集も

38. ③Font→を選択

39. ④各フォントを呼び出すキャラクター
（英数字・記号）を指定

40. ⑤Preferencesを選択し、
フォント名（ファイル名）を選ぶ

41. ⑦zipファイルより抜き出す
woff eot
⑥Downloadを選択

42. まとめ
• アイコンをフォント化すれば、
文字なので、CSS装飾が自由自在
• Fireworks拡張機能Export でSVGへ
• SVG→WebフォントはIcoMoon で変換
• 複雑な形のフォント化は不得意

43. 参考URL
• Fireworks で戦国武将の家紋を作って
SVG な Web Font に変換してみる
歴史雑談録 松田直樹さん
※SVG→フォントをFont Custom（for mac）で
• Fireworksを使ってオリジナルのWebアイコンを作成、
実装しよう！ ｜ フロントエンドとかPCとかスマホとか
※SVG→フォントをIcoMoon（for ブラウザ）で
• アイコンをWebフォント化してリクエスト数の削減とRetina
Displayに一発対応 ｜ Developers.IO
※ SVG→フォントをTTEdit（for windows）で
SVG変換にはillustratorを使用

44. https://www.facebook.com/
FireworksBook/