Save 37% off PRO during our Black Friday Sale! »

ウェブフォントのエモい話

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
April 24, 2018

 ウェブフォントのエモい話

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

April 24, 2018
Tweet

Transcript

  1. ウェブフォントの エモい話 Takanori Oki @Roppongi.js #2

  2. 自己紹介 • Takanori Oki ( @takanorip ) • 株式会社スマートドライブ •

    フロントエンドエンジニア • Nuxt.js、React、Polymer、その他ウェブ制作 • フォントが好き
  3. ウェブフォントの本 書きました

  4. None
  5. None
  6. JSあんまり関係ないかも… ごめんなさい…

  7. ウェブフォント 使ってますか?

  8. 「ウェブフォントって重いよね」

  9. 「ウェブフォント使うと パフォーマンス落ちるよね」

  10. None
  11. それ、ちゃんと使ってから 言ってる?

  12. ウェブフォントの課題 • フォントデータは重い
 (特に日本語フォントは重い、漢字のせい) • テキストレンダリングをブロックしてしまう こともある • ネットワークが遅いと問題になりがち

  13. 技術で解決できる! (ちょっと大変だけど)

  14. それでも ウェブフォントを使う理由

  15. デバイスやOSに依存せず、 デザインのクオリティを 保つため

  16. そんなにデザイン大事? • フォントはサイトの「印象」を左右する • 同じデザインでもフォントによって、
 テキストの可読性や全体の雰囲気が変わる • ブランディングやユーザー体験に直結する

  17. デザインをきちんと再現するのも フロントエンドエンジニアの役目

  18. しかし!

  19. 何も考えずに使うと パフォーマンスの低下を招く 諸刃の剣

  20. なんで遅いの?

  21. None
  22. Font Loading API

  23. Font Loading API • Promiseを返す • CSSのfont-faceをJSから制御する • フォントのローディング状態を監視できる •

    モダンブラウザなら使える(IEは無視)
  24. preload

  25. 宣伝

  26. 詳しい手法については 「イヌでもわかるウェブフォント」 をご覧ください!!

  27. おわり (フォント:源柔ゴシックL)