公開日:
CodingDiary-1

Blog

CssAnimation

-Google iconの{font-variation-settings:}の変更-


はじめまして
GoogleFontsのIconや絵文字を利用してCSSのアニメーションで遊んでいます
今回 font-variation-settings:の使い方に触れています
お付き合い頂けたら幸いです😅


Demo



google-fontsのページからHTML用とCSS用のコードをコピペします

google_iconhp
google-icon


右欄を拡大するとこんな感じです head内に貼り付けます

google_iconhp

HTML 
        
        <head>
          <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=skateboarding" />
        </head>

下のコピーコードは 変更する部分があるのでCSSに貼り付けます

google_iconhp

CSS 
        
        .material-symbols-outlined {
          font-variation-settings:
          'FILL' 0,
          'wght' 400,
          'GRAD' 0,
          'opsz' 24
        }

このコードがIconになるのでbody内の表示したい部分に貼り付け

google_iconhp


body内に貼り付けたのがこちら↓
背景設定など出来るように"skebo"の中に入れます

HTML 
        
        <div class="skebo">
          <span class="material-symbols-outlined">
          skateboarding
          </span>
        </div>

colorとweightの変更
今回のiconは塗りつぶしになっているのでcolorを指定するだけでOK
線(outline)で描かれたiconは線に色がつくので塗りつぶしのようにしたい場合は'FILL'を1に変更します（今回は0のまま）
font-weightを太めにするのでノーマルの wght:400,を700にします 0にすると可哀そうなぐらい痩せます...（ちなみに font-variation-settings:を利用しなくてもfont-weightで変更可能です）

CSS 
        
        .material-symbols-outlined{
          color: darkorange;
          font-variation-settings:
          'FILL' 0,
          'wght' 700,
          'GRAD' 0,
          'opsz' 24
        }


Demo2

'FILL'を1に変更しています


CSS 
        
        .material-symbols-outlined {
          font-variation-settings:
          'FILL' 1,
          'wght' 400,
          'GRAD' 0,
          'opsz' 24
        }


Demo2-1

'FILL'を0に戻しています


CSS 
        
        .material-symbols-outlined {
          font-variation-settings:
          'FILL' 0,
          'wght' 400,
          'GRAD' 0,
          'opsz' 24
        }

colorは各々class名を付けて変更（一例）

HTML 
        
        <span class="material-symbols-outlined bg">
            storefront
        </span>
        
        <span class="material-symbols-outlined bg-w">
            forest
        </span>

CSS 
        
        .bg{
            font-size: 32px;
            color: brown;
            padding-top: 10px;
        }
        .bg-w{
            font-size: 40px;
            color: green;
        }


参考資料:
・「現場で使えるWebデザインアイデアレシピ」
　小林マサユキ著（マイナビ出版）
・Google-icons
　https://fonts.google.com/icons

▲ ■ ■ ■ ■ ■ ▼ Thank You !

最後までご覧いただきありがとうございました
しばらくanimationで遊んでみたいと思っています
お付き合い頂けたら幸いです

Mail

過去のブログはこちら↓
1)CssAnimation -Google iconの{font-variation-settings:}の変更-

TOP