Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ウェブフォントのエモい話
Search
takanorip
April 24, 2018
Technology
3
3.2k
ウェブフォントのエモい話
takanorip
April 24, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
380
Bulletproof Design System with TypeScript
takanorip
6
3.8k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
150
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
910
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.3k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.9k
Other Decks in Technology
See All in Technology
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
450
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
0
240
OpenTelemetry の Log を使いこなそう
biwashi
5
1.2k
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
0
360
Jitera Company Deck / JP
jitera
0
310
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
120
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
230
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
150
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
620
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
140
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
220
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
150
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Facilitating Awesome Meetings
lara
54
6.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Raft: Consensus for Rubyists
vanstee
140
7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
It's Worth the Effort
3n
185
28k
Gamification - CAS2011
davidbonilla
81
5.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
770
Transcript
ウェブフォントの エモい話 Takanori Oki @Roppongi.js #2
自己紹介 • Takanori Oki ( @takanorip ) • 株式会社スマートドライブ •
フロントエンドエンジニア • Nuxt.js、React、Polymer、その他ウェブ制作 • フォントが好き
ウェブフォントの本 書きました
None
None
JSあんまり関係ないかも… ごめんなさい…
ウェブフォント 使ってますか?
「ウェブフォントって重いよね」
「ウェブフォント使うと パフォーマンス落ちるよね」
None
それ、ちゃんと使ってから 言ってる?
ウェブフォントの課題 • フォントデータは重い (特に日本語フォントは重い、漢字のせい) • テキストレンダリングをブロックしてしまう こともある • ネットワークが遅いと問題になりがち
技術で解決できる! (ちょっと大変だけど)
それでも ウェブフォントを使う理由
デバイスやOSに依存せず、 デザインのクオリティを 保つため
そんなにデザイン大事? • フォントはサイトの「印象」を左右する • 同じデザインでもフォントによって、 テキストの可読性や全体の雰囲気が変わる • ブランディングやユーザー体験に直結する
デザインをきちんと再現するのも フロントエンドエンジニアの役目
しかし!
何も考えずに使うと パフォーマンスの低下を招く 諸刃の剣
なんで遅いの?
None
Font Loading API
Font Loading API • Promiseを返す • CSSのfont-faceをJSから制御する • フォントのローディング状態を監視できる •
モダンブラウザなら使える(IEは無視)
preload
宣伝
詳しい手法については 「イヌでもわかるウェブフォント」 をご覧ください!!
おわり (フォント:源柔ゴシックL)