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

Variable Font を使ってみた

7e56a691cfb413e0f6e631791f33fe54?s=47 misumi
July 06, 2021

Variable Font を使ってみた

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

7e56a691cfb413e0f6e631791f33fe54?s=128

misumi

July 06, 2021
Tweet

Transcript

  1. 7BSJBCMF'POUΛ࢖ͬͯΈͨ

  2. 7BSJBCMF'POU ɾ"EPCFɺ"QQMFɺ(PPHMFɺ.JDSPTPGU͕ ɹ೥݄ʹൃද ɾ7BSJBCMFʢՄมతͳʣϑΥϯτ ɹͭͷϑΥϯτϑΝΠϧ͔Βଠ͞΍෯ɺߴ͞ɺ ɹͦͷଞಠࣗͷϓϩύςΟΛ࿈ଓతʹมߋͰ͖Δ ɾ͍࣋ͬͯΔ৘ใ͸ϑΥϯτʹΑͬͯҧ͏

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

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

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

  8. ϒϥ΢βঢ়گ *&͓·͑ϚδͰʜ

  9. (PPHMF'POUT ೥݄ʹߜΓࠐΈͷνΣοΫϘοΫε͕௥Ճ͞ΕͨΒ͍͠

  10. "OJDPOT

  11. 7BSJBCMF'POUͲ͏ͳͷ ɾಡΈࠐΉϑΥϯτϑΝΠϧҰͭʹͳΔ ɾϑΥϯτͷΞχϝʔγϣϯ౳දݱͷ෯͕޿͕Δ ɾϞϦαϫ͕࿨จͷ։ൃΛͯ͠ΔΒ͍͠ ɾීٴ͸·ͩ·ͩઌʜʁ

  12. ৽͍ٕ͠ज़ʹ৮ΕΔͷ͸ ָ͍͠ͷͰ΍ͬͯΈΑ͏

  13. ͓ΘΓ