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
210
Variable Font を使ってみた
社内勉強会で使った資料です
▲
July 06, 2021
Tweet
Share
More Decks by ▲
See All by ▲
サーバーレスでフロントエンドも個人開発
mismith0227
0
410
見落としがちな想定漏れ
mismith0227
0
190
最近のWordPressの開発環境について調べてみた
mismith0227
1
280
gulpをやめてnpm scriptを使う
mismith0227
0
160
Tailwindcssを使ってみる
mismith0227
0
220
カンパイ本町を支える技術
mismith0227
0
2.9k
WP REST APIとReact Nativeを使ってマガジンアプリを作る
mismith0227
1
2k
Material - UI v1が 出そうなので使ってみた
mismith0227
0
2.2k
なんか作ってサーバーレスに触れてみた
mismith0227
0
390
Other Decks in Design
See All in Design
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
140
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
800
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
720
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
330
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.3k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
450
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
280
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
570
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
540
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
300
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Being A Developer After 40
akosma
90
590k
BBQ
matthewcrist
89
9.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Invisible Side of Design
smashingmag
301
51k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
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Ͳ͏ͳͷ ɾಡΈࠐΉϑΥϯτϑΝΠϧҰͭʹͳΔ ɾϑΥϯτͷΞχϝʔγϣϯදݱͷ෯͕͕Δ ɾϞϦαϫ͕จͷ։ൃΛͯ͠ΔΒ͍͠ ɾීٴ·ͩ·ͩઌʜʁ
৽͍ٕ͠ज़ʹ৮ΕΔͷ ָ͍͠ͷͰͬͯΈΑ͏
͓ΘΓ