Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Variable Font を使ってみた
▲
July 06, 2021
Design
1
65
Variable Font を使ってみた
社内勉強会で使った資料です
▲
July 06, 2021
Tweet
Share
More Decks by ▲
See All by ▲
サーバーレスでフロントエンドも個人開発
mismith0227
0
230
見落としがちな想定漏れ
mismith0227
0
58
最近のWordPressの開発環境について調べてみた
mismith0227
1
72
gulpをやめてnpm scriptを使う
mismith0227
0
58
Tailwindcssを使ってみる
mismith0227
0
72
カンパイ本町を支える技術
mismith0227
0
2.2k
WP REST APIとReact Nativeを使ってマガジンアプリを作る
mismith0227
1
1.4k
Material - UI v1が 出そうなので使ってみた
mismith0227
0
2.1k
なんか作ってサーバーレスに触れてみた
mismith0227
0
240
Other Decks in Design
See All in Design
UI/UXデザイナーになるには 日常編
kimurakei
0
370
A Designer’s Guide to Documenting Accessibility & User Interactions
stephaniewalter
0
7.7k
Meep
vincentwu
PRO
1
240
Figmaを学ぶ会Vol.2プロジェクトメンバー全員が幸せになるFigmaプロジェクト管理術
kuritagit
0
220
Réparons la ville !
sylvaingrisot
1
6.1k
hourly comics (2022)
gyroidz
0
210
幸せなパーパス経営の実現に欠かせない、社員の「個人理念」の重要性と活用法
kakukoki
PRO
0
120
Детский парк Фили
zapoimu
0
420
Big Surからの四角いアイコン / Rounded Rectangle Icons since Big Sur
1024jp
2
160
Fairest of Them All
pandemonay
1
620
ujeza_final.pdf
ujki
0
680
Misconceptions of Design Thinking
yosukeonishi
3
340
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
86
12k
WebSockets: Embracing the real-time Web
robhawkes
57
5k
Infographics Made Easy
chrislema
233
17k
Thoughts on Productivity
jonyablonski
43
2.2k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
YesSQL, Process and Tooling at Scale
rocio
157
12k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Documentation Writing (for coders)
carmenhchung
48
2.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Typedesign – Prime Four
hannesfritz
33
1.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Happy Clients
brianwarren
89
5.5k
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Ͳ͏ͳͷ ɾಡΈࠐΉϑΥϯτϑΝΠϧҰͭʹͳΔ ɾϑΥϯτͷΞχϝʔγϣϯදݱͷ෯͕͕Δ ɾϞϦαϫ͕จͷ։ൃΛͯ͠ΔΒ͍͠ ɾීٴ·ͩ·ͩઌʜʁ
৽͍ٕ͠ज़ʹ৮ΕΔͷ ָ͍͠ͷͰͬͯΈΑ͏
͓ΘΓ