Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 • Takanori Oki ( @takanorip ) • 株式会社スマートドライブ • フロントエンドエンジニア • Nuxt.js、React、Polymer、その他ウェブ制作 • フォントが好き

Slide 3

Slide 3 text

ウェブフォントの本 書きました

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

JSあんまり関係ないかも… ごめんなさい…

Slide 7

Slide 7 text

ウェブフォント 使ってますか？

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

それ、ちゃんと使ってから 言ってる？

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

技術で解決できる！ （ちょっと大変だけど）

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

しかし！

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

なんで遅いの？

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Font Loading API

Slide 23

Slide 23 text

Font Loading API • Promiseを返す • CSSのfont-faceをJSから制御する • フォントのローディング状態を監視できる • モダンブラウザなら使える（IEは無視）

Slide 24

Slide 24 text

preload

Slide 25

Slide 25 text

宣伝

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

おわり （フォント：源柔ゴシックL）