@font-face制作Web Icon

@font-face规则在css2中已经存在，但在css2.1中被删除，在css3中又重新被引入。自从Metro 风格被大多前段程序员青睐后，使用@font-face制作web icon 已经广泛使用于网页设计

下面例子是制作Metro风格按钮

1.在网站http://icomoon.io/app/上下载所需的图标

压缩包中包含有相应的例子

2.把fonts文件夹添加都你的网页文件中，

在css文件中初始化字体样式

@font-face {

font-family: 'icomoon';

src:url('fonts/icomoon.eot');

src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),

url('fonts/icomoon.woff') format('woff'),

url('fonts/icomoon.ttf') format('truetype'),

url('fonts/icomoon.svg#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

3.引用字体样式

[data-icon]:before {

font-family: 'icomoon';

content: attr(data-icon);

speak: none;

font-weight: normal;

font-variant: normal;

text-transform: none;

line-height: 1;

-webkit-font-smoothing: antialiased;

}

4.下面是html代码

<!doctype html>

<html>

<head>

<title>使用@font-face来实现icon</title>

</head>

<body>

</body>

</html>

4.为btn添加css样式

.btn{ display:block; height:100px;line-height:100px; 100px; background:#09F; text-align:center; font-size:3em; cursor:pointer;

}

5.效果图