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

Transcript

1. ウェブフォントの エモい話 Takanori Oki @Roppongi.js #2
2. 自己紹介 • Takanori Oki ( @takanorip ) • 株式会社スマートドライブ • フロントエンドエンジニア • Nuxt.js、React、Polymer、その他ウェブ制作 • フォントが好き
3. ウェブフォントの本 書きました
6. JSあんまり関係ないかも… ごめんなさい…
7. ウェブフォント 使ってますか？
8. 「ウェブフォントって重いよね」
9. 「ウェブフォント使うと パフォーマンス落ちるよね」
11. それ、ちゃんと使ってから 言ってる？
12. ウェブフォントの課題 • フォントデータは重い
 （特に日本語フォントは重い、漢字のせい） • テキストレンダリングをブロックしてしまう こともある • ネットワークが遅いと問題になりがち
13. 技術で解決できる！ （ちょっと大変だけど）
14. それでも ウェブフォントを使う理由
15. デバイスやOSに依存せず、 デザインのクオリティを 保つため
16. そんなにデザイン大事？ • フォントはサイトの「印象」を左右する • 同じデザインでもフォントによって、
 テキストの可読性や全体の雰囲気が変わる • ブランディングやユーザー体験に直結する
17. デザインをきちんと再現するのも フロントエンドエンジニアの役目
18. しかし！
19. 何も考えずに使うと パフォーマンスの低下を招く 諸刃の剣
20. なんで遅いの？
22. Font Loading API
23. Font Loading API • Promiseを返す • CSSのfont-faceをJSから制御する • フォントのローディング状態を監視できる • モダンブラウザなら使える（IEは無視）
24. preload
25. 宣伝
26. 詳しい手法については 「イヌでもわかるウェブフォント」 をご覧ください！！
27. おわり （フォント：源柔ゴシックL）