linusz 2019-06-20
1.ps 或者 Illustrator 等
2.FontCreator 字体编辑器
1.在图片软件中调整好单独的图标;
2.打开FontCreator 新建个字体,定义名称,然后删成需要的样子(也可以不删 )。
3.打开一个空白字符图形,点击“导入图像”,导入我们制作一个图标。
4.右击字符图形,选“属性”,调下值 然后插入(这个值用在写页面的时候),做完保存。
5.打开http://www.fontsquirrel.com/tools/webfont-generator上传刚才的字体 在线生成下其他格式的文件 然后下载下来。
6.css写法:
CSS@font-face { font-family: 'fontName'; src: url('../font/fontName.eot'); src: url('../font/fontName.eot') format('embedded-opentype'), url('../font/fontName.woff') format('woff'), url('../font/fontName.ttf') format('truetype'), url('../font/fontName.svg#fontNameregular') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: fontName; font-weight: normal; font-style: normal; text-decoration: inherit; display: inline; width: auto; height: auto; line-height: normal; vertical-align: baseline; background-image: none !important; background-position: 0% 0%; background-repeat: repeat; } [class^="icon-"]:before, [class*=" icon-"]:before { text-decoration: inherit; display: inline-block; speak: none; } .icon-call:before { content: "\e600 "; }
7.html:
HTML<i class="icon-call"></i>
题外话:这边使用的fontCreator工具,类似的工具还有很多,比如:IcoMoon和Iconfont 。道理都一样,先制作svg图标,再由svg生成字体。