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

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）