这是一步一步的指南:
转到Font Squirrel并下载@ font-face工具包.解压缩,将其重命名为“fonts”,并将其放在与html文件相同的目录中.
将此作为您的html文件:
@font-face {
font-family: 'ModernPictogramsNormal';
src: url('fonts/modernpics-webfont.eot');
src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/modernpics-webfont.woff') format('woff'),
url('fonts/modernpics-webfont.ttf') format('truetype'),
url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
font-weight: normal;
font-style: normal;
}
li {
list-style-type: none;
}
[data-icon]:before {
font-family: 'ModernPictogramsNormal';
content: attr(data-icon);
speak: none;
padding:0 5px;
}
- RSS
- Star
- Shopping Cart
你应该看到这个:
你在滚!
此外,要了解要使用的字符,请查看Font Squirrel站点上的字符映射.