Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

18 308 vues

Publié le

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

Publié dans : Ingénierie
  • Soyez le premier à commenter

いまさら訊けない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!!!

×