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
Variable Font を使ってみた
Search
▲
July 06, 2021
Design
1
140
Variable Font を使ってみた
社内勉強会で使った資料です
▲
July 06, 2021
Tweet
Share
More Decks by ▲
See All by ▲
サーバーレスでフロントエンドも個人開発
mismith0227
0
330
見落としがちな想定漏れ
mismith0227
0
130
最近のWordPressの開発環境について調べてみた
mismith0227
1
190
gulpをやめてnpm scriptを使う
mismith0227
0
120
Tailwindcssを使ってみる
mismith0227
0
170
カンパイ本町を支える技術
mismith0227
0
2.6k
WP REST APIとReact Nativeを使ってマガジンアプリを作る
mismith0227
1
1.7k
Material - UI v1が 出そうなので使ってみた
mismith0227
0
2.2k
なんか作ってサーバーレスに触れてみた
mismith0227
0
350
Other Decks in Design
See All in Design
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
620
Designing UIs without a UI designer
strongeron
0
120
Jeremy's First Day
myates3
1
130
実務のための マイクロ インタラクション入門
shingo2000
0
360
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
730
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.3k
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
310
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
280
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
360
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
The Language of Interfaces
destraynor
151
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
259
12k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Designing Experiences People Love
moore
136
23k
Why Our Code Smells
bkeepers
PRO
331
56k
Side Projects
sachag
451
41k
Teambox: Starting and Learning
jrom
128
8.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Transcript
7BSJBCMF'POUΛͬͯΈͨ
7BSJBCMF'POU ɾ"EPCFɺ"QQMFɺ(PPHMFɺ.JDSPTPGU͕ ɹ݄ʹൃද ɾ7BSJBCMFʢՄมతͳʣϑΥϯτ ɹͭͷϑΥϯτϑΝΠϧ͔Βଠ͞෯ɺߴ͞ɺ ɹͦͷଞಠࣗͷϓϩύςΟΛ࿈ଓతʹมߋͰ͖Δ ɾ͍࣋ͬͯΔใϑΥϯτʹΑͬͯҧ͏
࿈ଓతͱʁ @font-face { font-family: 'Roboto Regular'; src: url('../fonts/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Bold'; src: url('../fonts/Roboto-Bold.ttf') format('truetype'); } ݱঢ়ಉ͡ϑΥϯτͰଠ͕͞ҧ͑ ͦΕͧΕಡΈࠐΉඞཁ͕͋Δ
࿈ଓతͱʁ .regular { font-size: 48px; font-family: 'Roboto Regular', sans-serif; }
.bold { font-size: 48px; font-family: 'Roboto Bold', sans-serif; } ͦͯ͠ଠ͞ʹΑͬͯࢦఆ͢Δ
࿈ଓతͱʁ @font-face { font-family: 'Roboto Flex'; src: url('../fonts/RobotoFlex[slnt,wdth,wght,opsz].ttf') format('truetype-variations'); font-weight:
100 1000; font-stretch: 25% 151%; } όϦΞϒϧϑΥϯτҰͭͷϑΝΠϧʹ ଠ͞ͳͲͷใ͕શؚͯ·Ε͍ͯΔ
࿈ଓతͱʁ .variable-robot { font-size: 48px; font-family: 'Roboto Flex', sans-serif; font-variation-settings:
'wght' 400, 'wdth' 90, 'GRAD' 1; } ͦͷͨΊ$44ͰΛࢦఆͯ͠ ଠͦ͞ͷଞϑΥϯτ͕࣋ͭใΛͳͲͰมߋͰ͖Δ
࣮ࡍʹͬͯΈͨ
ϒϥβঢ়گ *&͓·͑ϚδͰʜ
(PPHMF'POUT ݄ʹߜΓࠐΈͷνΣοΫϘοΫε͕Ճ͞ΕͨΒ͍͠
"OJDPOT
7BSJBCMF'POUͲ͏ͳͷ ɾಡΈࠐΉϑΥϯτϑΝΠϧҰͭʹͳΔ ɾϑΥϯτͷΞχϝʔγϣϯදݱͷ෯͕͕Δ ɾϞϦαϫ͕จͷ։ൃΛͯ͠ΔΒ͍͠ ɾීٴ·ͩ·ͩઌʜʁ
৽͍ٕ͠ज़ʹ৮ΕΔͷ ָ͍͠ͷͰͬͯΈΑ͏
͓ΘΓ