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
370
見落としがちな想定漏れ
mismith0227
0
150
最近のWordPressの開発環境について調べてみた
mismith0227
1
240
gulpをやめてnpm scriptを使う
mismith0227
0
140
Tailwindcssを使ってみる
mismith0227
0
180
カンパイ本町を支える技術
mismith0227
0
2.8k
WP REST APIとReact Nativeを使ってマガジンアプリを作る
mismith0227
1
1.8k
Material - UI v1が 出そうなので使ってみた
mismith0227
0
2.2k
なんか作ってサーバーレスに触れてみた
mismith0227
0
370
Other Decks in Design
See All in Design
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.3k
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
180
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
500
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
380
root COMPANY DECK / We are hiring!
root_recruit
1
16k
今日から始める グラレコ チャレンジ DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
140
Yahoo Newsletter Clicker Template
xuechunwu
0
300
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
300
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
270
横断組織デザイナーの働き方
mixi_design
PRO
0
200
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
4
250
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
400
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
The Language of Interfaces
destraynor
154
24k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Gamification - CAS2011
davidbonilla
80
5.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.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Ͳ͏ͳͷ ɾಡΈࠐΉϑΥϯτϑΝΠϧҰͭʹͳΔ ɾϑΥϯτͷΞχϝʔγϣϯදݱͷ෯͕͕Δ ɾϞϦαϫ͕จͷ։ൃΛͯ͠ΔΒ͍͠ ɾීٴ·ͩ·ͩઌʜʁ
৽͍ٕ͠ज़ʹ৮ΕΔͷ ָ͍͠ͷͰͬͯΈΑ͏
͓ΘΓ