11 |
IconFont 图标
12 |
13 |
14 | -
15 |
16 |
add
17 | 
18 | .add
19 |
20 |
21 | -
22 |
23 |
answer
24 | 
25 | .answer
26 |
27 |
28 | -
29 |
30 |
app
31 | 
32 | .app
33 |
34 |
35 | -
36 |
37 |
browser
38 | 
39 | .browser
40 |
41 |
42 |
43 |
44 |
45 |
46 | 第一步:使用font-face声明字体
47 |
48 | @font-face {font-family: 'iconfont';
49 | src: url('iconfont.eot'); /* IE9*/
50 | src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
51 | url('iconfont.woff') format('woff'), /* chrome、firefox */
52 | url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
53 | url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
54 | }
55 |
56 | 第二步:定义使用iconfont的样式
57 |
58 | .iconfont{
59 | font-family:"iconfont" !important;
60 | font-size:16px;font-style:normal;
61 | -webkit-font-smoothing: antialiased;
62 | -webkit-text-stroke-width: 0.2px;
63 | -moz-osx-font-smoothing: grayscale;}
64 |
65 | 第三步:挑选相应图标并获取字体编码,应用于页面
66 |
67 | <i class="iconfont">3</i>
68 |
69 |
70 |
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/src/fonts/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
IconFont 图标
12 |
13 |
14 | -
15 |
16 |
add
17 | 
18 | .add
19 |
20 |
21 | -
22 |
23 |
answer
24 | 
25 | .answer
26 |
27 |
28 | -
29 |
30 |
app
31 | 
32 | .app
33 |
34 |
35 | -
36 |
37 |
browser
38 | 
39 | .browser
40 |
41 |
42 |
43 |
44 |
45 |
46 | 第一步:使用font-face声明字体
47 |
48 | @font-face {font-family: 'iconfont';
49 | src: url('iconfont.eot'); /* IE9*/
50 | src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
51 | url('iconfont.woff') format('woff'), /* chrome、firefox */
52 | url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
53 | url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
54 | }
55 |
56 | 第二步:定义使用iconfont的样式
57 |
58 | .iconfont{
59 | font-family:"iconfont" !important;
60 | font-size:16px;font-style:normal;
61 | -webkit-font-smoothing: antialiased;
62 | -webkit-text-stroke-width: 0.2px;
63 | -moz-osx-font-smoothing: grayscale;}
64 |
65 | 第三步:挑选相应图标并获取字体编码,应用于页面
66 |
67 | <i class="iconfont">3</i>
68 |
69 |
70 |
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/dist/fonts/demo.css:
--------------------------------------------------------------------------------
1 | *{margin: 0;padding: 0;list-style: none;}
2 | /*
3 | KISSY CSS Reset
4 | 理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。
5 | 2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。
6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。
7 | 特色:1. 适应中文;2. 基于最新主流浏览器。
8 | 维护:玉伯