什麼是質感設計符號?
Material 符號是我們最新的圖示,將超過 2,500 個字符整合為具有多種設計變化版本的單一字型檔案。符號有三種樣式,以及四個可調整的變數字型軸 (填滿、粗細、分級和光學大小)。請參閱 Material 符號程式庫中的整套 Material 符號。
FILL
軸
填滿功能可讓您修改預設的圖示樣式。一個圖示可以同時顯示未填滿和已填滿狀態。
如要傳送狀態轉場效果,請使用填滿軸的動畫或互動。預設值是 0,完全填入的值是 1。除了權重軸外,填滿也會影響圖示的外觀。
wght
軸
權重定義符號的筆劃粗細,使用細部 (100) 到粗體 (700) 之間的粗細範圍。權重也會影響符號的整體大小。
GRAD
軸
體重和等級會影響符號的粗細。等級調整比權重調整更為精細,而且對符號大小的影響不大。
部分文字字型也支援成績。您可以在文字和符號之間比對成績等級,打造和諧的視覺效果。舉例來說,如果文字字型的成績值為 -25,則符號可以與適當的值 (例如 -25) 配對。
您可以根據不同需求使用成績:
低強調 (例如 -25 年級):若要在深色背景中減少淺色符號的炫光,請使用低色調。
高強調 (例如 200 年級):如要醒目顯示符號,請提高正分。
opsz
軸
光學大小範圍介於 20dp 到 48dp 之間。
如要讓圖片在不同大小呈現相同效果,則筆劃粗細 (粗細) 會隨著圖示大小縮放而變更。光學尺寸可在增加或減少符號大小時,自動調整筆劃粗細。
取得質感設計符號
Material 符號提供多種格式,適合各種類型的專案和平台,適用於應用程式的開發人員,以及模擬圖或原型設計中的設計人員。
授權
Material 符號適用於 Apache 授權 2.0 版。
瀏覽及下載個別圖示
完整的 Material 符號清單來自 SVG 或 PNG 格式的 Material 符號程式庫。適用於網頁、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" />
上述程式碼片段包含各軸的預設設定,其中 weight 為 400,weight 為 48,Grade 為 0,填入 (同樣為 0)
請使用 Fonts 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 符號程式庫上找到圖示名稱和程式碼點。每個圖示字型在 Google Fonts git 存放區中都有一個碼點索引,顯示完整的名稱和字元碼組合。
Material Design 中的樣式圖示
這些圖示在設計方面符合質感設計指南,而且在使用建議的圖示大小和顏色時,能夠呈現最佳效果。下方的樣式可讓您輕鬆套用建議的大小、顏色和活動狀態。
在 Android 中使用
在 Material 符號程式庫中,所有圖示都是採用向量可繪項目格式。詳情請參閱 Android Vector Asset Studio 說明文件。
在 iOS 中使用
圖示也可為 Apple 符號格式。詳情請參閱 Apple 官方符號總覽和使用指南。
在 Flutter 中使用
已規劃對 Material 符號的 Flutter 支援。請密切留意最新消息。