项目中要求新增一些自定义的字体文件,由于之前的字体文件库中的字体文件没有新需求所要求的,只好新增字体文件,但是新增字体文件时,最好确定一个整体的字体文件库的范围,一次性生成一个字体文件,否则就会很繁琐。使用icoMoon可以很方便的生成自己想要的字体文件。下面是关于字体文件的生成教程。
1.登录icoMoon官网
在百度搜索icoMoon或者直接输入https://icomoon.io即可找到官网,有时打开较慢,可能需要翻墙。
2.进入字体制作页面
打开官网如下图所示:
点击红框框的选项,进入字体制作的页面
3.添加所需要转成字体文件的icon样式
点击Import Icons ,然后从本地上传一个svg图片至该网站上,或者可以直接选择icoMoon提供的free的icon
上传完成后会出现新的一个选项卡,点击选择自己上传的icon。此时需要注意的是:正常上传的svg会有icon的缩略图显示,如果没有显示缩略图,如上图最后一个白框,则代表此svg图片不可以用来制作icon。经测试,对svg图片的要求是:该svg必须是由ai转svg生成的svg图片。此处可以import多个svg图片以供批量生成icon。所以,如果原icon是png格式的,需要先将png转ai,ai再转svg。此处推荐一款ai转svg的工具,vertor magic,用法可以自行百度。
选择好所需的icon后点击下面的generate font(没有截到图不好意思)进入导出字体文件页面
4.设置导出文件名以及导出文件
(1)点击Preferences 可进行字体文件的相关配置,如下图
font-name是设置字体文件的导出名字,其他的请自行参考
(2)Trade2 和e900 设置的是字体的引用名以及对应的编码,可以自己定义,每个字体的名称和编码不可重复,get code 选项可以具体查看如何使用icon。
(3)点击download 即可下载字体文件。
4.将下载的字体文件导入项目中
下载后的目录如图所示,只需要在项目中引入以上选中的两个文件,并且在需要使用icon的页面,将css文件导入即可。此处注意引用的路径,css文件里面配置了font文件夹的路径,放到项目中时需要注意匹配。
ps:有的时候引用的icon样式会出乱,此时需要在外层添加一个inherit的样式: