Material
Design
Lite
樣式

Material Design Lite 是 Material Design 的輕量級實作，專為網頁打造。如需其他平台的更詳細指南和規範，請參閱 Material Design 網站

排版

h1
Light 112sp
display-4 字體粗細 300
h2
Regular 56sp
display-3 字體粗細 400
h3
Regular 45sp
display-2 字體粗細 400
h4
Regular 34sp
display-1 字體粗細 400
h5
Regular 24sp
headline 字體粗細 400
h6
Regular 20sp
title 字體粗細 500
注意：此部分僅用於展示 CSS 的標題和顯示樣式。如需更多排版指南，請參閱 Material Design 規範。
file_download 下載 Roboto 字體 1.21 MB (.zip)
要將 Roboto 嵌入到您的網頁中，請將程式碼複製為 HTML 文件 <head> 中的第一個元素。
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
預覽圖示 arrow_forward

圖示

Material Design Icons 是 Google Material Design 規範中的官方開源圖示。包含內容

  • 所有圖示的 SVG 版本，包含 24px 和 48px 兩種尺寸
  • 所有圖示的 SVG 和 CSS 精靈圖
  • 適用於網頁的 1x、2x 圖示 (PNG)
  • 適用於 iOS 的 1x、2x、3x 圖示 (PNG)
  • 所有圖示的高解析度版本 (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)

開始使用

您有幾種方法可以取得圖示。

下載壓縮檔

從 master 取得所有最新穩定版壓縮檔 (約 57MB)，包含所有最新圖示。

file_download 下載

Bower

使用 Bower 套件管理器安裝圖示。
$ bower install material-design-icons --save

npm

您也可以在 npm 上找到所有圖示。
$ npm install material-design-icons --save

使用方法

查看隨附的 index.html 檔案，預覽包含在集合中的所有圖示。您可以自由使用最適合您專案的方式使用這些圖示。

結構

一般來說，圖示類別（例如動作）將包含以下目錄，其中包含多種解析度的圖示。

  • 1x, 2x 網頁
  • 1x, 2x, 3x iOS
  • drawable hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi
  • svg

決定專案所需的圖示解析度並複製，然後參考您要使用的圖示。

精靈圖

Material Design 圖示隨附我們包含的每個圖示類別的 SVG 和 CSS 精靈圖。這些可以在 sprites 目錄下的 svg-sprite 和 css-sprite 中找到。

使用 CSS 精靈圖

要使用 CSS 精靈圖，請參考您要使用的圖示類別的樣式表，然後在您的標記中包含圖示定義。例如，要使用 css-sprite-av 中的其中一個播放圖示。

這樣就完成了！部署專案時，別忘了發佈對應的 CSS 和 SVG/PNG 檔案。

參考樣式表
<link href="css-sprite/sprite-av-black.css" rel="stylesheet">
建立一個將使用圖示作為背景的元素
<div></div>
新增一個參考 icon 精靈圖和特定 icon icon-ic_play-circle_outline_black_24dp 的類別，您可以從上述樣式表中取得。
<div class="icon icon-ic_play-circle_outline_black_24dp"></div>

使用 SVG 精靈圖

同樣地，要使用 SVG 精靈圖，請參考圖示類別的樣式表，然後在您的標記中包含圖示定義。

例如：要使用 svg-sprite-av 中的其中一個播放圖示，請參考樣式表
<link href="svg-sprite/svg-sprite-av.css" rel="stylesheet">
建立一個將使用圖示作為背景的元素
<div></div>
接下來，請務必設定圖示的尺寸。這可以透過內嵌或類別來完成。在此範例中，我們將使用類別。
<style>
  .svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; }
</style>
最後，設定尺寸和特定圖示 svg-ic_play_circle_outline_24px，您可以從上述樣式表中取得。
<div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims"> </div>

Polymer 圖示

如果您想將圖示集與 Polymer 搭配使用，我們建議您透過 <iron-icons> 元素 使用它們。

授權

所有圖示均以 Attribution 4.0 International 授權 釋出。

調色盤

調色盤

如果您使用的是延伸調色盤，請使用第一種顏色作為應用程式的主要顏色，其他顏色作為輔助顏色。

查看所有顏色及其無障礙比率。此資源包含在彩色背景上使用白色或黑色文字時的適當對比比和 Alpha 值資訊。

file_download 下載色票 0.02 MB (.zip)
arrow_forward 試用自訂 CSS 佈景主題產生器
下載工具包