Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Variable Font を使ってみた

July 06, 2021

Variable Font を使ってみた

社内勉強会で使った資料です

July 06, 2021
Tweet

More Decks by ▲

Other Decks in Design

Transcript

  1. ࿈ଓతͱ͸ʁ @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'); } ݱঢ়͸ಉ͡ϑΥϯτͰ΋ଠ͕͞ҧ͑͹ ͦΕͧΕಡΈࠐΉඞཁ͕͋Δ
  2. ࿈ଓతͱ͸ʁ .regular { font-size: 48px; font-family: 'Roboto Regular', sans-serif; }

    .bold { font-size: 48px; font-family: 'Roboto Bold', sans-serif; } ͦͯ͠ଠ͞ʹΑͬͯࢦఆ͢Δ
  3. ࿈ଓతͱ͸ʁ @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%; } όϦΞϒϧϑΥϯτ͸ҰͭͷϑΝΠϧʹ ଠ͞ͳͲͷ৘ใ͕શؚͯ·Ε͍ͯΔ
  4. ࿈ଓతͱ͸ʁ .variable-robot { font-size: 48px; font-family: 'Roboto Flex', sans-serif; font-variation-settings:

    'wght' 400, 'wdth' 90, 'GRAD' 1; } ͦͷͨΊ$44Ͱ஋Λࢦఆͯ͠ ଠ͞΍ͦͷଞϑΥϯτ͕࣋ͭ৘ใΛ਺஋ͳͲͰมߋͰ͖Δ