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
160
Variable Font を使ってみた
社内勉強会で使った資料です
▲
July 06, 2021
Tweet
Share
More Decks by ▲
See All by ▲
サーバーレスでフロントエンドも個人開発
mismith0227
0
360
見落としがちな想定漏れ
mismith0227
0
140
最近のWordPressの開発環境について調べてみた
mismith0227
1
230
gulpをやめてnpm scriptを使う
mismith0227
0
130
Tailwindcssを使ってみる
mismith0227
0
170
カンパイ本町を支える技術
mismith0227
0
2.7k
WP REST APIとReact Nativeを使ってマガジンアプリを作る
mismith0227
1
1.8k
Material - UI v1が 出そうなので使ってみた
mismith0227
0
2.2k
なんか作ってサーバーレスに触れてみた
mismith0227
0
360
Other Decks in Design
See All in Design
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
310
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
350
富山デザイン勉強会_インフォグラフィックが上手に描けるコツ.pdf
keita_yoshikawa
1
160
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
45
27k
RIDLEY JONES - Ridley's Christmas Carol
serenascipio
1
160
We Baby Bears-Triple T Tiger
yvonnehsuanho
PRO
0
430
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
13
5.7k
Cхематизация процессов и пользовательского опыта с Картой процесса-опыта
ashapiro
0
260
アフォーダンスとシグニファイア
ryokanakai
0
270
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1k
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
260
我做了一個詐騙網站...嗎?
crboy
1
140
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Navigating Team Friction
lara
183
14k
Documentation Writing (for coders)
carmenintech
65
4.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Designing Experiences People Love
moore
138
23k
Designing for Performance
lara
604
68k
KATA
mclloyd
27
13k
Making Projects Easy
brettharned
114
5.8k
What the flash - Photography Introduction
edds
67
11k
YesSQL, Process and Tooling at Scale
rocio
167
14k
The Cult of Friendly URLs
andyhume
77
6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
2
220
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Ͳ͏ͳͷ ɾಡΈࠐΉϑΥϯτϑΝΠϧҰͭʹͳΔ ɾϑΥϯτͷΞχϝʔγϣϯදݱͷ෯͕͕Δ ɾϞϦαϫ͕จͷ։ൃΛͯ͠ΔΒ͍͠ ɾීٴ·ͩ·ͩઌʜʁ
৽͍ٕ͠ज़ʹ৮ΕΔͷ ָ͍͠ͷͰͬͯΈΑ͏
͓ΘΓ