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

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

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

2022-05-17 更新:Font Awesome 5/6 Free 仍可免費商用

不過,剛開始你可能會像我一樣,搞不懂同樣的圖示為什麼有兩套 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

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

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


圖片來源

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,GRAD@20..48,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,GRAD@20..48,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>

不囉嗦,收入前端工具箱。Google 佛心,一生平安。

【參考資料】

Introduce to Google Material Symbols and Material Icons.


Comments

# by ChrisTorng

有關: Font-Awesome 從 5.0 開始授權由 SIL OFL 1.1 改為「個人小量使用免費,商用採訂閱制」政策 我查了很久,最後在 https://github.com/FortAwesome/Font-Awesome/issues/16884 中看到,意思應該是只要不使用官方提供的 Kits 就仍然免費。 https://fontawesome.com/docs/web/setup/use-kit 使用 Kits 就要註冊帳號,免費帳號有一個 Kit 可用,限制一個月一萬次瀏覽,由帳號內可看到瀏覽次數。 所以照以往自行下載到自己網站,或使用非官方 CDN 應該還是免費才對。

# by Jeffrey

to ChrisTorng,感謝分享,你是對的,補上我的研究心得 https://blog.darkthread.net/blog/font-awesome-license/

Post a comment