风格

Material Design Lite 是Material Design的一个轻量级实现,专为Web制作。 关于更详细的规范和其他平台的实现请参考 Material Design site

排版

h1
Light 112sp
display-4 font weight 300
h2
Regular 56sp
display-3 font weight 400
h3
Regular 45sp
display-2 font weight 400
h4
Regular 34sp
display-1 font weight 400
h5
Regular 24sp
headline font weight 400
h6
Regular 20sp
title font weight 500
Note:这部分只是展示了标题和显示出来的的css的样式。 更多的排版指南,请参考Material Design spec
要嵌入Roboto字体到你的网页,复制以下代码到HTML文档中做为 <head> 标签中的第一个元素。
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">

图标

图标是精选的 Google Material Design 规范中的正式开源的图标。包括:

  • SVG版所有的图标都有24px和48px两种格式
  • 所有图标的 SVG 和 css 雪碧图版
  • 1x.2x用于web (PNG)
  • 1x,2x,3x用于iOS (PNG)
  • 所有图标都具备高画质版 (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)

起步

你有多种方式可以获取图标。

下载 Zip

从站点获取最新版本的所有最新稳定图标zip压缩包(〜57MB)。

Bower

通过 Bower 包管理工具安装图标
$ bower install material-design-icons --save

npm

你也可以在 npm 上找到所有图标
$ npm install material-design-icons --save

用法

通过查看包含的index.html预览所有图标。您可以自由使用的图标,以最有意义的方式到项目中。

结构

在一般情况下,一个图标类别(如动作)将包括以下目录,包含了图标的多种分辨率。

  • 1x, 2x Web
  • 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 雪碧图中相关的css,这里是 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>
下一步,确定好图标的尺寸,这可以通过行内样式或者class来修改,这里我们使用一个class。
<style>
.svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; }
</style>
最后,设置尺寸并指定图标class svg-ic_play_circle_outline_24px ,你可以从前边的样式表中找到它。
<div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims"> </div>

Polymer Icons

如果你想要在Ploymer中使用图标,我们建议通过 <iron-icons>-element 元素来实现它。

许可证

所有的图标基于 Attribution 4.0 International license 发布。

调色板

如果你使用扩展的调色板,在应用程序使用第一个颜色作为主色,其他颜色作为点缀。

查看所有的颜色和它们的可访问性比率.此资源包括在彩色背景上使用白色或黑色文本时的适当对比度和 alpha 值信息。

Download Kit