Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

いまさら訊けないWebフォント入門

17,277 views

Published on

社内で餅を焼きながら勉強会やったときの資料です。

Published in: Engineering

いまさら訊けないWebフォント入門

  1. 1. いまさら けない Webフォント入門 2015/02/04 GaiaX社内勉強会 @hoto17296
  2. 2. あじぇんだ 1. Webフォントとはなにか 2. Webフォントのよさ 3. Webフォントのつかいかた
  3. 3. 1. Webフォントとはなにか
  4. 4. Webサイトでフォントを 変えたいときにどうするか font-family: "メイリオ", sans-serif; クライアントに 依存 バリエーション 少ない
  5. 5. 好き勝手に フォントを使いたい
  6. 6. @font-face ルール @font-face {
 font-family: 'ほにゃ字';
 src: url('honya.ttf');
 } p {
 font-family: 'ほにゃ字';
 } フォント 定義 使用
  7. 7. 独自フォントが 使える!!! ( ゚д゚) ほにゃ字Re http://honya.nyanta.jp/
  8. 8. (余談) 実はIE4から使える
  9. 9. 時代が Microsoft に 追いついた
  10. 10. 2. Webフォントのよさ
  11. 11. クライアントに依存せずに 好きなフォントが使える
  12. 12. 「いや、でも別に
   標準のフォントで
   困ってねーし...」
  13. 13. それだけじゃない
  14. 14. 画像の代わりになる • 単色のアイコンなんかは
 Webフォントにしたほうがいい • color プロパティだけで色変えれるの最高 • Retinaディスプレイでも荒くならない • 例: http://hoto.me/ (SNSのアイコン)
  15. 15. 画像アイコンだと Retinaディスプレイで 荒くなってダサい
  16. 16. Cooooool!!!
  17. 17. ラスタ画像で Webデザインする 時代は終わった
  18. 18. これからは ベクタ画像の時代
  19. 19. 3. Webフォントの
 つかいかた
  20. 20. つかいかた 4パターン • CDNなWebフォントを使う • Webフォント用に配布されている
 フォントを使う • 普通のフォントをWeb用に変換して使う • フォント自作
  21. 21. CDNなWebフォントを使う • Google Fonts が有名 • サーバにフォントファイルを
 置いておかなくていいので一番手軽 • 日本語のバリエーションが皆無
  22. 22. Webフォント用に配布されている
 フォントを使う • アイコン用Webフォントは結構多い • Bootstrap3 の Glyphicon • IcoMoon (https://icomoon.io/) • 日本語フォントはあまりない印象
  23. 23. 普通のフォントを
 Web用に変換して使う • 自由度高い • 規約に注意が必要 • 何も考えずに日本語フォントを
 変換すると重すぎて死ぬ • サブセットの切り出しをするとよい
  24. 24. フォント自作 • がんばってください
  25. 25. 今日できなかった話
  26. 26. 今日できなかった話 • フォントのフォーマットの話 • ちょっと前までは大変だった • 最近は woff 使っとけばいいっしょ、て感じ • フォント変換・サブセット切り出しの仕方 • 武蔵システムは神 • Unicode の私用領域の話
  27. 27. Enjoy!!!

×