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
210
カンパイ本町を支える技術
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
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
160
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.9k
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
430
How to get a Tiger to Tulsa
mcduckyart
0
110
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
630
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
130
CIRCULAR ECONOMY + SERVICES
jmanooch
0
120
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4k
minpaku-community-scrum-patterns
norinity1103
1
120
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
370
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Embracing the Ebb and Flow
colly
86
4.7k
Code Reviewing Like a Champion
maltzj
524
40k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
For a Future-Friendly Web
brad_frost
179
9.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Optimizing for Happiness
mojombo
379
70k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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Ͳ͏ͳͷ ɾಡΈࠐΉϑΥϯτϑΝΠϧҰͭʹͳΔ ɾϑΥϯτͷΞχϝʔγϣϯදݱͷ෯͕͕Δ ɾϞϦαϫ͕จͷ։ൃΛͯ͠ΔΒ͍͠ ɾීٴ·ͩ·ͩઌʜʁ
৽͍ٕ͠ज़ʹ৮ΕΔͷ ָ͍͠ͷͰͬͯΈΑ͏
͓ΘΓ