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
180
Variable Font を使ってみた
社内勉強会で使った資料です
▲
July 06, 2021
Tweet
Share
More Decks by ▲
See All by ▲
サーバーレスでフロントエンドも個人開発
mismith0227
0
380
見落としがちな想定漏れ
mismith0227
0
160
最近のWordPressの開発環境について調べてみた
mismith0227
1
250
gulpをやめてnpm scriptを使う
mismith0227
0
140
Tailwindcssを使ってみる
mismith0227
0
190
カンパイ本町を支える技術
mismith0227
0
2.8k
WP REST APIとReact Nativeを使ってマガジンアプリを作る
mismith0227
1
1.9k
Material - UI v1が 出そうなので使ってみた
mismith0227
0
2.2k
なんか作ってサーバーレスに触れてみた
mismith0227
0
380
Other Decks in Design
See All in Design
Tableau曲線表現講座(2024.11.21)
cielo1985
0
270
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
120
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
200
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
220
太田博三(@usagisan2020)
otanet
0
240
ZKK_001.pdf
nicholaspegu
0
1.5k
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
250
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
150
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
470
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
920
プロダクトデザインの「守破離」の「破」について
hayashirine
0
320
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Embracing the Ebb and Flow
colly
84
4.6k
Writing Fast Ruby
sferik
628
61k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Faster Mobile Websites
deanohume
306
31k
Designing for Performance
lara
605
68k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
Agile that works and the tools we love
rasmusluckow
328
21k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
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Ͳ͏ͳͷ ɾಡΈࠐΉϑΥϯτϑΝΠϧҰͭʹͳΔ ɾϑΥϯτͷΞχϝʔγϣϯදݱͷ෯͕͕Δ ɾϞϦαϫ͕จͷ։ൃΛͯ͠ΔΒ͍͠ ɾීٴ·ͩ·ͩઌʜʁ
৽͍ٕ͠ज़ʹ৮ΕΔͷ ָ͍͠ͷͰͬͯΈΑ͏
͓ΘΓ