Variable Font を使ってみた

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. ͓ΘΓ