Upload
tsutomu-kawamura
View
9.220
Download
0
Embed Size (px)
DESCRIPTION
もはや、フォントは「画像形式」のひとつです。アイコンやロゴをWebで表示するならば、シンボルフォント(アイコンフォント)を自作するのが一番。 前半で、シンボルフォントを取り巻く現状を、後半で実際の制作方法を紹介します。 ※このスライドは、2014年5月15日のCSS Niteで話した内容です。 http://cssnite.jp/afterdark/cpi/vol10/
Citation preview
河村 奨 (Tsutomu Kawamura)
facebook.com/cognitom
シンボルフォント ̶それは、新しい画像形式̶
+ +色々
シンボルフォント?
今日話すのは、コレ。
たとえば、 これ。
これも、
これも フォント。
Webdings !"#$%&'
Wingdings !"#$%&'
Arial ABCDEFGHI
昔からおなじみ?
Webフォント 使ってますか?
こんなの
こんなの
こんなの
こんなの
これだけ。
<link!rel="stylesheet"!type="text/css"!href="http://fonts.googleapis.com/css?!family=Tangerine" />
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 ✔ ✔ ✔
ブラウザ 対応状況
シンボルフォント +
Webフォント
コレです。
@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.
何が美味しいの?
u
なめらか。Retina Ready :-)
CSSで色コントロール
サーバリクエスト減 = 速い
WOFF
シンボルフォントな
Webサイト
Octicons
※Symbolsetを利用
Segoe UI Symbol
シンボルフォント
いろいろ
Font Awesome
• 人気です。どのくらい?
• GitHubで ★2.3万 • 参考まで…
• Bootstrap ★6.7万
• jQuery ★3万
369 icons
open source!
GLYPHICONS
• Bootstrapに同梱 • 商用ライセンスなら、
ロイヤリティフリー!
• 混ぜても大丈夫
Foundation Icon Fonts 3
http://symbolset.com http://icomoon.iohttp://kudakurage.com/ligature_symbols/
多色刷りも
GIF
透過PNG
CSSスプライト
SVG?
Webフォント!
PUAを使う
Ligature (合字)
多色刷りほか
* PUA = Private User Area
未来現在過去
アイコン利用の小歴史
レスポンシブ Web デザイン
モバイルファースト / Retina
フラットデザイン 2012
2011
2013フォントDIY
ここ数年のトレンド + α
と言ってたら
ほんとに来た ! ※日本以外…
でも、フォントなんて
どうやって作るの?
S
そう。それが、
今日のテーマです。
u
シンボルフォント の 作り方
Aコース Bコース Cコース
Sketch
Grunt
Adobe IllustratorGlyphs Mini
FontPrep
OTF SVG SVG
Aコース Bコース Cコース
Sketch 3
gulp
Adobe IllustratorGlyphs Mini
FontPrep
OTF SVG SVG
Glyphs Mini - ¥4,500 FontPrep - ¥0
OTF
TTF
SVG
EOT
WOFF出力 変換
Webフォント
GUIアプリだけで完結。フォント好き向けA コース
Illustrator - ¥26,160 / 年 (単体)
TTF
SVG
EOT
WOFF出力 変換
Webフォント + CSS
使い慣れたIllustratorではじめる、フォントライフB コース
SVG CSS
IcoMoon - ¥0~
Sketch 3 - ¥7,800
TTF
SVG
EOT
WOFF出力 変換
Webフォント + CSS
イチオシ、完全自動化アイコン制作環境C コース
CSS
gulp - ¥0
Illustrator による
アイコンフォント制作
B コース
Recipe • Mac / Windows
• Adobe Illustrator
• IcoMoon (Webアプリ)
• HTML / CSS の基礎知識
グリッド ベジェ曲線
アイコン作成 ❶Recipe
icons/512x512.ait
アイコン作成 ❷Recipe
フランクフルトを描く マスタードを描く 型抜き
簡単なアイコンの例
※一色で作図する必要があります。
アイコン作成 ❸Recipe
SVG形式で保存 SVGのオプション
IcoMoon ❶Recipe
アイコンをインポート ファイル選択
IcoMoon ❷Recipe
グリフの一括選択 設定変更・ダウンロード
IcoMoon ❸Recipe
設定変更
• IcoMoon → anne-library
• icon- → ai-
• Class Selector → .ai
IcoMoonのデフォルトの書き方
<i class=“icon-eat”></i> FontAwesome的な書き方
<i class=“ai ai-eat”></i>
IcoMoon ❹Recipe
ダウンロード!
EOT (Embedded OpenType)
TTF (TrueType Font)SVGフォント
WOFF (Web Open Font Format)
CSS
SVG出力して、変換。 これだけ。
B コース
デモサイト
こんなの
作ってみました。
PCTabletPhone
ࡉࠗࠢࡦࡈࡀࡦࠕ
⺒ ୫ࠆࠅ ߁⾈ 㘩ࠆߴ
Anne Frank Micro Library Project
http://annelibrary.github.io/
読み返してみて考えよう
公立図書館に借りにいこう
読んで、友達に贈ろう
フランクフルトを片手に語り合おう!
ߊ⟎ࠍޠ⸤ᣣޟ
ߚ߈⟎ߦ✜৻
ᧄࠍਗࠆߴ
お店に、オフィスに。自宅の本棚に。
ライブラリーの開き方
アクションをおこす
NjȜǶƤథ֘
451
「アンネ・フランク・ライブラリー」は、誰でも参加でき
るプロジェクトです。合言葉は「読むこともライブラリー、
借りるのもライブラリー、本を置くのも語り合うのも
ライブラリー」。詳しくはこちらまで。
元にしたポスター
シンプル。フラット。
テーマ毎のアイコン
この辺は、Font Awesome
水平線もアイコン
題字はTypeSquare
イラストも
背景も
girl emblem
borrow buy
diary related
books leaned pot grinderstacked
eatread
Font Awesome
誤解を恐れずに言うなら、
フォントは、 画像形式のひとつになった。
GIF JPEG PNG SVG フォント
写真 × ◎ △ × ×
イラスト × △ ○ ◎ ×
ロゴ △ × ○ ○ ◎
アイコン △ × △ △ ◎
画像 or フォント?
シンボルフォント の 使い方
ファイル配置 ❶Recipe
フォントを fonts へ。CSSは anne-library.css にリネームして css へ。
IcoMoonから ダウンロードしたファイル
ファイル配置 ❷Recipe ここでは、 fonts/ → ../fonts/ に置換 (環境に合わせて)
HTMLの編集 ❶Recipe
アイコン追加前の HTMLはこんな感じ。
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>
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>
<i class="ai ai-girl"></i>
<i class="fa fa-twitter"></i>
<i> タグ?
HTML5的には、セーフ ※気になる人は、<span>タグで
アイコンであることを示す モジュール性を確保
CSSのアイデア ❶Recipe !
.title > i { font-size: 800%; background: #fff; border-radius: .5em; width: 1em; }
800% = 128px
r = 0.5em
1em
丸囲み
CSSのアイデア ❷Recipe
.title-hr { border-top: 3px solid #423933; }
600% = 96px
-0.5em
水平線
.title-hr > i { font-size: 600%; margin: -.5em 0; }
色の変更Recipe 例えば青系に。これを、
後からの調整に、 マジで強い。
r
先週、 こんなの作りました。
おまけ
Sketch用 フォントテンプレート
SketchTool
gulp-sketch gulp-iconfont
gulp-consolidate
SVG
さくさく フォントが作れます
$ gulp symbols ↵
https://github.com/cognitom/symbols-for-sketch
シンボルフォント まとめ
意外と作るのカンタン
後からの調整に マジで強い
もはや、フォントは、
画像形式のひとつ
選択肢いろいろ全部作らなくてもOK!
使わない手はない。
【結論】
Thank you.