シンボルフォント — それは、新しい画像形式
DESCRIPTION
もはや、フォントは「画像形式」のひとつです。アイコンやロゴをWebで表示するならば、シンボルフォント(アイコンフォント)を自作するのが一番。 前半で、シンボルフォントを取り巻く現状を、後半で実際の制作方法を紹介します。 ※このスライドは、2014年5月15日のCSS Niteで話した内容です。 http://cssnite.jp/afterdark/cpi/vol10/TRANSCRIPT
![Page 1: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/1.jpg)
河村 奨 (Tsutomu Kawamura)
facebook.com/cognitom
シンボルフォント ̶それは、新しい画像形式̶
![Page 2: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/2.jpg)
+ +色々
![Page 3: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/3.jpg)
シンボルフォント?
![Page 4: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/4.jpg)
今日話すのは、コレ。
![Page 5: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/5.jpg)
たとえば、 これ。
![Page 6: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/6.jpg)
これも、
![Page 7: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/7.jpg)
これも フォント。
![Page 8: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/8.jpg)
Webdings !"#$%&'
Wingdings !"#$%&'
Arial ABCDEFGHI
昔からおなじみ?
![Page 9: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/9.jpg)
Webフォント 使ってますか?
![Page 10: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/10.jpg)
こんなの
![Page 11: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/11.jpg)
こんなの
![Page 12: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/12.jpg)
こんなの
![Page 13: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/13.jpg)
こんなの
![Page 14: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/14.jpg)
これだけ。
<link!rel="stylesheet"!type="text/css"!href="http://fonts.googleapis.com/css?!family=Tangerine" />
![Page 15: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/15.jpg)
TTF EOT WOFF SVG
IE 4 ✔
9~ ✔ ✔
Firefox 3.5 ✔
3.6~ ✔ ✔
Safari 3.1 ✔ ✔
5.1~ ✔ ✔ ✔
Chrome 4 ✔ ✔
6~ ✔ ✔ ✔
iOS4 ✔
4.2 ✔ ✔
5.1~ ✔ ✔ ✔
Android2.2 ✔
3.1 ✔ ✔
current ✔ ✔ ✔
ブラウザ 対応状況
![Page 16: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/16.jpg)
シンボルフォント +
Webフォント
![Page 17: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/17.jpg)
コレです。
![Page 18: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/18.jpg)
@font-face { font-family: 'MyIcons'; src: url(‘MyIcons.ttf') format('truetype'); }
<span class=”mi mi-good”></span>
<i class=”mi mi-good”></i>
<i class=”mi”>good</i>
例1.
例2.
例3.
![Page 19: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/19.jpg)
何が美味しいの?
u
![Page 20: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/20.jpg)
なめらか。Retina Ready :-)
![Page 21: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/21.jpg)
CSSで色コントロール
![Page 22: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/22.jpg)
サーバリクエスト減 = 速い
WOFF
![Page 23: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/23.jpg)
シンボルフォントな
Webサイト
![Page 24: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/24.jpg)
Octicons
![Page 25: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/25.jpg)
![Page 26: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/26.jpg)
![Page 27: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/27.jpg)
※Symbolsetを利用
![Page 28: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/28.jpg)
Segoe UI Symbol
![Page 29: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/29.jpg)
シンボルフォント
いろいろ
![Page 30: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/30.jpg)
Font Awesome
• 人気です。どのくらい?
• GitHubで ★2.3万 • 参考まで…
• Bootstrap ★6.7万
• jQuery ★3万
![Page 31: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/31.jpg)
369 icons
![Page 32: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/32.jpg)
open source!
![Page 33: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/33.jpg)
GLYPHICONS
• Bootstrapに同梱 • 商用ライセンスなら、
ロイヤリティフリー!
• 混ぜても大丈夫
![Page 34: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/34.jpg)
Foundation Icon Fonts 3
![Page 35: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/35.jpg)
http://symbolset.com http://icomoon.iohttp://kudakurage.com/ligature_symbols/
![Page 36: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/36.jpg)
多色刷りも
![Page 37: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/37.jpg)
![Page 38: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/38.jpg)
![Page 39: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/39.jpg)
GIF
透過PNG
CSSスプライト
SVG?
Webフォント!
PUAを使う
Ligature (合字)
多色刷りほか
* PUA = Private User Area
未来現在過去
アイコン利用の小歴史
![Page 40: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/40.jpg)
レスポンシブ Web デザイン
モバイルファースト / Retina
フラットデザイン 2012
2011
2013フォントDIY
ここ数年のトレンド + α
![Page 41: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/41.jpg)
と言ってたら
ほんとに来た ! ※日本以外…
![Page 42: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/42.jpg)
でも、フォントなんて
どうやって作るの?
S
![Page 43: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/43.jpg)
そう。それが、
今日のテーマです。
u
![Page 44: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/44.jpg)
シンボルフォント の 作り方
![Page 45: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/45.jpg)
Aコース Bコース Cコース
Sketch
Grunt
Adobe IllustratorGlyphs Mini
FontPrep
OTF SVG SVG
![Page 46: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/46.jpg)
Aコース Bコース Cコース
Sketch 3
gulp
Adobe IllustratorGlyphs Mini
FontPrep
OTF SVG SVG
![Page 47: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/47.jpg)
Glyphs Mini - ¥4,500 FontPrep - ¥0
OTF
TTF
SVG
EOT
WOFF出力 変換
Webフォント
GUIアプリだけで完結。フォント好き向けA コース
![Page 48: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/48.jpg)
Illustrator - ¥26,160 / 年 (単体)
TTF
SVG
EOT
WOFF出力 変換
Webフォント + CSS
使い慣れたIllustratorではじめる、フォントライフB コース
SVG CSS
IcoMoon - ¥0~
![Page 49: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/49.jpg)
Sketch 3 - ¥7,800
TTF
SVG
EOT
WOFF出力 変換
Webフォント + CSS
イチオシ、完全自動化アイコン制作環境C コース
CSS
gulp - ¥0
![Page 50: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/50.jpg)
Illustrator による
アイコンフォント制作
B コース
![Page 51: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/51.jpg)
Recipe • Mac / Windows
• Adobe Illustrator
• IcoMoon (Webアプリ)
• HTML / CSS の基礎知識
グリッド ベジェ曲線
![Page 52: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/52.jpg)
アイコン作成 ❶Recipe
icons/512x512.ait
![Page 53: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/53.jpg)
アイコン作成 ❷Recipe
フランクフルトを描く マスタードを描く 型抜き
簡単なアイコンの例
※一色で作図する必要があります。
![Page 54: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/54.jpg)
アイコン作成 ❸Recipe
SVG形式で保存 SVGのオプション
![Page 55: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/55.jpg)
![Page 56: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/56.jpg)
IcoMoon ❶Recipe
アイコンをインポート ファイル選択
![Page 57: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/57.jpg)
IcoMoon ❷Recipe
グリフの一括選択 設定変更・ダウンロード
![Page 58: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/58.jpg)
IcoMoon ❸Recipe
設定変更
• IcoMoon → anne-library
• icon- → ai-
• Class Selector → .ai
IcoMoonのデフォルトの書き方
<i class=“icon-eat”></i> FontAwesome的な書き方
<i class=“ai ai-eat”></i>
![Page 59: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/59.jpg)
IcoMoon ❹Recipe
ダウンロード!
EOT (Embedded OpenType)
TTF (TrueType Font)SVGフォント
WOFF (Web Open Font Format)
CSS
![Page 60: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/60.jpg)
SVG出力して、変換。 これだけ。
B コース
![Page 61: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/61.jpg)
デモサイト
![Page 62: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/62.jpg)
こんなの
作ってみました。
![Page 63: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/63.jpg)
PCTabletPhone
![Page 64: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/64.jpg)
ࡉࠗࠢࡦࡈࡀࡦࠕ
⺒ ୫ࠆࠅ ߁⾈ 㘩ࠆߴ
Anne Frank Micro Library Project
http://annelibrary.github.io/
読み返してみて考えよう
公立図書館に借りにいこう
読んで、友達に贈ろう
フランクフルトを片手に語り合おう!
ߊ⟎ࠍޠ⸤ᣣޟ
ߚ߈⟎ߦ✜৻
ᧄࠍਗࠆߴ
お店に、オフィスに。自宅の本棚に。
ライブラリーの開き方
アクションをおこす
NjȜǶƤథ֘
451
「アンネ・フランク・ライブラリー」は、誰でも参加でき
るプロジェクトです。合言葉は「読むこともライブラリー、
借りるのもライブラリー、本を置くのも語り合うのも
ライブラリー」。詳しくはこちらまで。
元にしたポスター
シンプル。フラット。
テーマ毎のアイコン
この辺は、Font Awesome
水平線もアイコン
題字はTypeSquare
イラストも
背景も
![Page 65: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/65.jpg)
girl emblem
borrow buy
diary related
books leaned pot grinderstacked
eatread
Font Awesome
![Page 66: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/66.jpg)
誤解を恐れずに言うなら、
フォントは、 画像形式のひとつになった。
![Page 67: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/67.jpg)
GIF JPEG PNG SVG フォント
写真 × ◎ △ × ×
イラスト × △ ○ ◎ ×
ロゴ △ × ○ ○ ◎
アイコン △ × △ △ ◎
画像 or フォント?
![Page 68: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/68.jpg)
シンボルフォント の 使い方
![Page 69: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/69.jpg)
ファイル配置 ❶Recipe
フォントを fonts へ。CSSは anne-library.css にリネームして css へ。
IcoMoonから ダウンロードしたファイル
![Page 70: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/70.jpg)
ファイル配置 ❷Recipe ここでは、 fonts/ → ../fonts/ に置換 (環境に合わせて)
![Page 71: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/71.jpg)
HTMLの編集 ❶Recipe
アイコン追加前の HTMLはこんな感じ。
![Page 72: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/72.jpg)
HTMLの編集 ❷Recipe <link href="css/anne-library.css" rel="stylesheet">
<i class="ai ai-girl"></i>
<i class="fa fa-twitter"></i>
参考 : Font Awesome (上)、Glyphicon (下)
<i class="glyphicon glyphicon-cloud"></i>
![Page 73: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/73.jpg)
![Page 74: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/74.jpg)
HTMLの編集 ❸Recipe <i class="ai ai-girl"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="ai ai-read"></i>
<i class="ai ai-borrow"></i>
<i class="ai ai-buy"></i>
<i class="ai ai-eat"></i>
![Page 75: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/75.jpg)
<i class="ai ai-girl"></i>
<i class="fa fa-twitter"></i>
<i> タグ?
HTML5的には、セーフ ※気になる人は、<span>タグで
アイコンであることを示す モジュール性を確保
![Page 76: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/76.jpg)
CSSのアイデア ❶Recipe !
.title > i { font-size: 800%; background: #fff; border-radius: .5em; width: 1em; }
800% = 128px
r = 0.5em
1em
丸囲み
![Page 77: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/77.jpg)
CSSのアイデア ❷Recipe
.title-hr { border-top: 3px solid #423933; }
600% = 96px
-0.5em
水平線
.title-hr > i { font-size: 600%; margin: -.5em 0; }
![Page 78: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/78.jpg)
色の変更Recipe 例えば青系に。これを、
![Page 79: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/79.jpg)
![Page 80: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/80.jpg)
後からの調整に、 マジで強い。
r
![Page 81: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/81.jpg)
先週、 こんなの作りました。
おまけ
![Page 82: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/82.jpg)
Sketch用 フォントテンプレート
![Page 83: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/83.jpg)
![Page 84: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/84.jpg)
SketchTool
gulp-sketch gulp-iconfont
gulp-consolidate
SVG
![Page 85: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/85.jpg)
さくさく フォントが作れます
![Page 86: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/86.jpg)
$ gulp symbols ↵
![Page 87: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/87.jpg)
https://github.com/cognitom/symbols-for-sketch
![Page 88: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/88.jpg)
シンボルフォント まとめ
![Page 89: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/89.jpg)
意外と作るのカンタン
![Page 90: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/90.jpg)
後からの調整に マジで強い
![Page 91: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/91.jpg)
もはや、フォントは、
画像形式のひとつ
![Page 92: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/92.jpg)
選択肢いろいろ全部作らなくてもOK!
![Page 93: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/93.jpg)
使わない手はない。
【結論】
![Page 94: シンボルフォント — それは、新しい画像形式](https://reader033.vdocuments.net/reader033/viewer/2022052621/558526e6d8b42ada748b524f/html5/thumbnails/94.jpg)
Thank you.