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