1

好用的 Google Font 字型檔圖示：Material Symbols、Material Icons

 1 year ago
source link: https://blog.darkthread.net/blog/google-material-symbols/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

好用的 Google Font 字型檔圖示：Material Symbols、Material Icons-黑暗執行緒

前陣子驚喜發現 Google 有一套 Material 風格字型檔案圖示，數量超過 2500 個，開放原始碼，採 Apach V2 授權可免費用於個人及商業用途，還有友善的查詢介面：

Fig1_637880479593019859.png

使用方法跟 Font Awesome 一樣簡單，用 LINK 參照 CSS，在 HTML 插入 <span class="material-icons-outlined">emoji_emotions</span>，emoji_emotions 這段文字就會轉成笑臉圖示，是不是超酷？ (將一段文字對映成圖示的黑魔法叫 Ligatures)

Fig2_637877083543849673.png

Font-Awesome 從 5.0 開始授權由 SIL OFL 1.1 改為「個人小量使用免費，商用採訂閱制」政策，Google Material 圖示提供網站應用的另一個好選擇。

不過，剛開始你可能會像我一樣，搞不懂同樣的圖示為什麼有兩套 Material Symbols 跟 Material Icons，有什麼不同，該怎麼選擇？

下面是我的簡單整理：

Google Font 在 2021 先推出了 Material Icons，有超過 2000 個圖示，分成 Outlined、Filled、Rounded、Sharp、TwoTone 等五種風格，使用不同風格需載入不同的 CSS，CDN 網址為 https://fonts.googleapis.com/icon?family=Material+Icons(+風格)，Filled 為預設風格用 Material+Icons 即可；其餘以 Outlined 為例為 ?family=Material+Icons+Outlined，span class 則要改成 material-icons-outlined：

Fig2_637880479594028110.png

字型圖示最大的好處是可以跟字元一樣任意修改顏色、大小，甚至加上陰影。

Fig3_637880479595033853.png

Google 在 2022 年為再推出字型圖示進階版 - Material Symbols，共有 Outlined、Round、Sharp 三種風格，最大的特色在於採用可變字型技術(Variable Fonts)，一個字型能支援多種變形，依據 Fill、Weight、Grade、Optical Size 參數呈現不同結果：

Fig4_637880479597384866.gif
圖片來源

Material Symbols CSS CDN 位置是 https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined 預設參數為 Wight 400、Optical 48、Grade 0、Fill 0，但也可透過額外參數指定，例如，https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,100,1,200 指定 Opatical 20、Weight 100, Fill 1, Grade 200。

除了載入 CSS 時指定參數，還可載入一定變化範圍的字型檔，例如：https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200，然後再 CSS 樣式 font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48; 動態設定調整，甚至做成動畫效果，如以下展示：線上展示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Google Material Symbols</title>
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet" />
  <style>
    .material-symbols-outlined.demo {
      font-size: 3em;
    }
    .pulse { animation: pulse 1.5s infinite; }

    @keyframes pulse {
      0% { font-variation-settings: 'wght' 100; }
      50% { font-variation-settings: 'wght' 700; }
      100% { font-variation-settings: 'wght' 100; }
    }
  </style>
</head>
<body>
  <span class="material-symbols-outlined demo pulse">emoji_emotions</span>
</body>
</html>

Fig5_637880479598961962.gif

不囉嗦，收入前端工具箱。感謝 Google 佛心提供，一生平安。

【參考資料】


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK