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
220
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
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
310
富山デザイン勉強会_インフォグラフィックが上手に描けるコツ.pdf
keita_yoshikawa
1
140
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
2
190
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
900
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
5
1.4k
Baby Bear Genius
yvonnehsuanho
PRO
0
630
Shinjuku.rb #91 好きなもの紹介LT大会 "便利"や"役に立つ"とは別方面のRubyをつかったプログラミングがたのしい話
bash0c7
0
160
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
950
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.7k
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
310
PdMを始めたUIデザイナーのリアルな課題
muture
0
720
Breaking News on the Web
souvikdg
0
660
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Become a Pro
speakerdeck
PRO
22
4.9k
Why Our Code Smells
bkeepers
PRO
334
56k
Bash Introduction
62gerente
608
210k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
It's Worth the Effort
3n
182
27k
RailsConf 2023
tenderlove
28
810
How GitHub Uses GitHub to Build GitHub
holman
472
290k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Automating Front-end Workflow
addyosmani
1365
200k
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Ͳ͏ͳͷ ɾಡΈࠐΉϑΥϯτϑΝΠϧҰͭʹͳΔ ɾϑΥϯτͷΞχϝʔγϣϯදݱͷ෯͕͕Δ ɾϞϦαϫ͕จͷ։ൃΛͯ͠ΔΒ͍͠ ɾීٴ·ͩ·ͩઌʜʁ
৽͍ٕ͠ज़ʹ৮ΕΔͷ ָ͍͠ͷͰͬͯΈΑ͏
͓ΘΓ