自定义 iconfont 显示不出来或显示小框框
首先参考之前写过的 加载使用 iconfont 阿里巴巴矢量图标库 和 自定义 iconfont 字体图标 这两篇关于 iconfont 的文章,主要使用 font-class 方式引用 iconfont 字体图标。具体引用步骤参考 自定义 iconfont 字体图标,之前使用 FontCreator 软件进行自定义 iconfont 编辑的,就是用 FontCreator 打开 ttf、otf 或者 woff 字体(只支持这三种字体),插入新的字形,编辑字形,插入素材图片,修改字形属性中的名称和代码点。
不得不说,上次能够成功真的是幸运,这次修改了很多次,在浏览器中显示正常,但到了移动端,iconfont 图标就变成了小框框或者干脆不显示。后续修改代码点和字形名称都不管用,真的想要放弃了,发现了一个在线字体编辑器:百度字体编辑器,使用它导出来的字体就没有再出现小框框的问题。不知道原因,就很莫名其妙。网上说什么字体加载顺序不对啊,或者这个那个的,但用这个在线编辑器导出的字体就引入一种 ttf 文件,照样没有出现问题。
所以,如果遇到 iconfont 在 PC 端浏览器模拟器中显示正常,但移动端不显示的,建议使用 百度字体编辑器,或者干脆使用小图标图片。iconfont 最大的优势就是可以将图片当成字体使用,调节颜色和大小,但这个优势在统一 UI 风格的时候并不明显,因为很长一段时间,UI 风格是不会变来变去的。