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

Material 符號指南

什麼是 Material 符號？

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

`FILL` 軸

填滿功能可讓您修改預設的圖示樣式。單一圖示可以會顯示廣告空缺和空缺狀態

如要傳達狀態轉換，請使用填充軸做為動畫或互動。預設值值為 0，已填滿的數值則為 1。以及體重填滿範圍也會影響圖示的外觀。

`wght` 軸

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

`GRAD` 軸

成績軸視覺化

體重和成績會影響符號的粗細。成績調整：比權重調整更精細，而且對。

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

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

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

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

`opsz` 軸

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

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

取得質感設計符號

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

授權

Material 符號位於 Apache 授權 2.0 版。

瀏覽和下載個別圖示

完整的 Material 符號集從 Material Design 符號程式庫格式為 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。我們就可以載入整個可變字型退房日我可以使用可變字型嗎？以瞭解使用者是否能夠載入可變字型他們的感受例如：

甚至可以製作動畫！

自行託管字型

代管圖示字型的存放位置，以決定何時該更新素材資源。適用對象舉例來說，如果網址是 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 Design 符號程式庫選取任何圖示並開啟圖示字型面板。每個圖示字型都有 Google Fonts 中的程式碼控點索引 Git 存放區會顯示完整的名稱和字元代碼組合。

Material Design 中的圖示樣式

這些圖示的設計目的在於 Material Design 指南，使用建議的圖示大小和顏色時，它們呈現的效果最好。樣式，就能輕鬆套用建議的尺寸、顏色和活動狀態。

在 Android 中使用

在 Material 符號程式庫中，所有圖示都會採用向量可繪項目格式。目的地：要瞭解更多資訊，請查閱 Android Vector Asset Studio 說明文件

在 iOS 中使用

您也可以使用 Apple 符號格式圖示。如要進一步瞭解這些功能查看官方的 Apple 符號簡介和使用指南。

在 Flutter 中使用

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