Download SlideShare for Android. 15 million presentations at your fingertips  Get the app
×
  • Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 
« ‹ › »
   

シンボルフォント — それは、新しい画像形式

on

  • 1,531 views

もはや、フォントは「画像形式」のひとつです。アイコンやロゴをWebで表示するならば、シンボルフォント(アイコンフォント)を自作するのが一番。 ...

もはや、フォントは「画像形式」のひとつです。アイコンやロゴをWebで表示するならば、シンボルフォント(アイコンフォント)を自作するのが一番。
前半で、シンボルフォントを取り巻く現状を、後半で実際の制作方法を紹介します。

※このスライドは、2014年5月15日のCSS Niteで話した内容です。
http://cssnite.jp/afterdark/cpi/vol10/

Statistics

Views

Total Views
1,531
Views on SlideShare
1,091
Embed Views
440

Actions

Likes
34
Downloads
17
Comments
4

7 Embeds 440

http://cssnite.jp 343
https://twitter.com 32
https://cybozulive.com 26
http://feedly.com 19
http://s.deeeki.com 10
http://www.cssnite.jp 8
http://www.feedspot.com 2
More...

Accessibility

Categories

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

1–4 of 4 previous next Post a comment

  • iタグの是非についてですが、ここにまとめています。ご参考まで。
    https://github.com/cognitom/symbol-font-in-web/blob/master/src/markdown/09-CSS%E3%81%A8%E5%91%BD%E5%90%8D%E8%A6%8F%E5%89%87.md
    Are you sure you want to
    Your message goes here
    Processing…
  • 素晴らしいスライドですね！　ひとつだけ質問させていただきたいのですが、i要素はHTML5的にセーフという部分の補足資料などありましたら教えていただけませんでしょうか。　個人的に前々から「なんでi要素？」と気になり続けていた部分でして。
    Are you sure you want to
    Your message goes here
    Processing…
  • あと、最後に紹介した、Sketch向けのテンプレートもURL貼っておきます。
    https://github.com/cognitom/symbols-for-sketch
    Are you sure you want to
    Your message goes here
    Processing…
  • 途中で使っているテンプレートはこちら。
    https://github.com/AnneLibrary/annelibrary.github.io/tree/template
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    シンボルフォント — それは、新しい画像形式 シンボルフォント — それは、新しい画像形式 Presentation Transcript

    •  河村 奨 (Tsutomu Kawamura)  facebook.com/cognitom シンボルフォント ̶それは、新しい画像形式̶
    • + + 色々
    • 東京で2軒目の コワーキングスペース。 下北沢オープンソースCafe
    • 毎日、なにかしらイベント 部室いろいろ プログラマの多く集まる場
    • 毎週日曜には、 小中学生向けの コーダー道場も
    • オープンソース書籍多数。 気軽に、お立寄りください :-)
    • 主に、デザイナー のはずです。 執筆・教育 マスター デザイン プログラミング
    • ボルダーです。
    • シンボルフォント?
    • 今日話すのは、コレ。
    • たとえば、 これ。
    • これも、
    • これも フォント。
    • 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~ ✔ ✔ ✔ iOS 4 ✔ 4.2 ✔ ✔ 5.1~ ✔ ✔ ✔ Android 2.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? W ebフ ォ ン ト !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/ 読み返してみて 考えよう 公立図書館に 借りにいこう 読んで、友達に 贈ろう フランクフルトを 片手に語り合おう！ お店に、オフィスに。 自宅の本棚に。 ライブラリーの開き方 アクションをおこす 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.
    • https://github.com /cognitom/symbol-font-in-web/ 「シンボルフォント in Web (仮)」  facebook.com/cognitom