本頁面由 Cloud Translation API 翻譯而成。

Material 符號指南

什麼是 Material Symbols？

Material Design 符號是我們最新推出的圖示，可將超過 2,500 個字符合而為單一字型檔案，有多種設計變化版本。符號有三種樣式和四個可調整的變數字型軸 (填充、粗細、等級和光學大小)。如需完整的 Material 符號清單，請參閱 Material 符號程式庫。

`FILL` 軸

填滿功能可讓您修改預設的圖示樣式。單一圖示可同時呈現未填和已填狀態。

如要傳達狀態轉換，請使用填滿軸來呈現動畫或互動效果。預設值為 0，如果已完全填滿，則為 1。除了重量軸，填充也會影響圖示的外觀。

`wght` 軸

重量定義符號的筆觸粗細，範圍介於細 (100) 和粗體 (700)。粗體也會影響符號的整體大小。

`GRAD` 軸

等級軸視覺化

體重和成績會影響符號的粗細。等級調整比重量調整更精細，對符號大小的影響也較小。

某些文字字型也支援成績。您可以將文字和符號的等級相符，以便產生和諧的視覺效果。舉例來說，如果文字字型具有 -25 年級的值，則符號可以與合適的值進行比對 (例如 -25)。

您可以使用成績滿足不同的需求：

低強調 (例如 -25 年級)：減少黑暗中淺色符號的炫光問題或消音

高強調 (例如 200 年級)：如要標示符號，請增加正數。

`opsz` 軸

光學尺寸介於 20 dp 到 48 dp 之間。

如要讓圖片在不同大小時都能呈現相同的效果，則筆劃粗細 (粗細) 並隨著圖示大小縮放。光學雷達增加或減少符號大小時，可調整筆觸粗細。

取得 Material 符號

Material 符號有多種格式可供選擇，適用於以及專案和平台類型設計模型

授權

按 Apache 授權版本規定使用質感符號 2.0 版，直接在 Google Cloud 控制台實際操作。

瀏覽和下載個別圖示

您可以從 Material Symbols 程式庫下載完整的 Material Symbols，格式為 SVG 或 PNG。適用於網頁、Android 和 iOS 或任何和設計師工具

Git 存放區

git 存放區包含 SVG 格式的完整 Material 符號集。

$ git clone https://github.com/google/material-design-icons

使用質感設計符號

使用網頁版

使用 Material 符號字型是加入 Material 符號的最簡單方式轉換為網路專案

這些圖示會封裝為單一字型，讓網頁開發人員只需使用幾行程式碼，就能輕鬆整合這些圖示。

採用 Google Fonts 的靜態字型

如要設定在任何網頁中使用的圖示字型，最簡單的方法就是透過 Google Fonts。加入這一行 HTML：

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

上述程式碼片段包含軸，其中包含重量 400 度，光學尺寸 48 歲成績 0 和填入 (同樣是 0)。

使用字型 CSS API 設定不同的軸值請參考以下範例：

使用 Google Fonts 的可變字型

如要透過 CSS 製作圖示動畫，或想要更精細地控制圖示功能，請使用 Google 符號變數字型使用範圍 (格式為 number..number)，我們可以載入整個可變字型。請參閱「我可以使用變數字型支援」，瞭解使用者是否能夠載入變數字型，但大多數情況下，他們應該可以。例如：

甚至可以製作動畫！

最佳化圖示字型

使用 &icon_names 查詢參數，以字母順序排列的逗號分隔圖示名稱清單 (連字) 來分割字型，只納入應用程式相關的圖示。

不建議使用 - 使用預設值設定會載入所有 3,800 個圖示。字型酬載：295 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
```
建議 - 指定圖示名稱只載入必要的圖示字型酬載：1.7 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block
```
使用變數字型軸，僅包含應用程式的變數設定。大多數應用程式只需要幾種不同的軸線。

不建議：如果軸設定遺漏，系統會載入預設的靜態字型 (粗細 400、光學大小 24、圓形 50、等級 0、填滿 0)。一般來說，非必要的情況下加入所有可變的字型軸酬載。字型酬載：7.9 MB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100
```
建議 — 使用特定的軸組合。這裡舉個例子，說明完整的「FILL」軸可提供狀態之間的 CSS 轉換，「ROND」獲選為 100 設計。字型酬載：2.6 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
```

自行代管字型

代管圖示字型的存放位置，以決定何時該更新素材資源。舉例來說，如果網址為 https://example.com/material-symbols.woff，請新增下列 CSS 規則：

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

如要正確顯示字型，請宣告用於顯示圖示的 CSS 規則。這些規則通常會透過 Google Fonts API 樣式表的一部分提供，但，才能：

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

在 HTML 中使用圖示

上述範例使用稱為「連字」的排版功能，可透過圖示文字名稱顯示圖示字形。網路瀏覽器會自動將文字連字體替換為圖示向量，並提供比等效數字字元參照更易讀的程式碼。適用對象例如，在 HTML 中，您將使用 arrow_forward 代表圖示、而不是 。如果是其他圖示，請使用圖示名稱的蛇例 (例如將空格替換為底線)。

不論是電腦版還是行動版，大多數新式瀏覽器都支援這項功能裝置。請參閱可以使用的連字支援團隊看看使用者是否會處理個人要求。

如果您需要支援不支援特徵的瀏覽器，請指定使用數字字元參照 (又稱為碼點) 的圖示，例如如下：

您可以選取任何圖示並開啟圖示字型面板，在 Material Symbols 程式庫中查看圖示名稱和代碼點。每個圖示字型都有 Google Fonts git 存放區顯示所有名稱和字元代碼。

Material Design 中的圖示樣式

這些圖示的設計為遵循 Material Design 規範使用建議的圖示大小和顏色時，它們呈現的效果最好。下列樣式可讓您輕鬆套用建議的大小、顏色和活動狀態。

在 Android 中使用

在 Material Symbols 程式庫中，所有圖示都是向量圖形格式。目的地：詳情請參閱 Android Vector Asset Studio 說明文件。

在 iOS 中使用

這些圖示也提供 Apple Symbols 格式。如要進一步瞭解這些符號，請參閱官方 Apple Symbols 總覽和使用指南。

在 Flutter 中使用

我們計劃針對 Material Symbols 推出 Flutter 支援。敬請密切關注最新消息。