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. 7BSJBCMF'POUΛ࢖ͬͯΈͨ

    View full-size slide

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

    View full-size slide

  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');
    }
    ݱঢ়͸ಉ͡ϑΥϯτͰ΋ଠ͕͞ҧ͑͹
    ͦΕͧΕಡΈࠐΉඞཁ͕͋Δ

    View full-size slide

  4. ࿈ଓతͱ͸ʁ
    .regular {
    font-size: 48px;
    font-family: 'Roboto Regular', sans-serif;
    }
    .bold {
    font-size: 48px;
    font-family: 'Roboto Bold', sans-serif;
    }
    ͦͯ͠ଠ͞ʹΑͬͯࢦఆ͢Δ

    View full-size slide

  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%;
    }
    όϦΞϒϧϑΥϯτ͸ҰͭͷϑΝΠϧʹ
    ଠ͞ͳͲͷ৘ใ͕શؚͯ·Ε͍ͯΔ

    View full-size slide

  6. ࿈ଓతͱ͸ʁ
    .variable-robot {
    font-size: 48px;
    font-family: 'Roboto Flex', sans-serif;
    font-variation-settings: 'wght' 400, 'wdth' 90, 'GRAD' 1;
    }
    ͦͷͨΊ$44Ͱ஋Λࢦఆͯ͠
    ଠ͞΍ͦͷଞϑΥϯτ͕࣋ͭ৘ใΛ਺஋ͳͲͰมߋͰ͖Δ

    View full-size slide

  7. ࣮ࡍʹ࢖ͬͯΈͨ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide