字体库图片(字体库是什么意思)

字体库图片(字体库是什么意思)最近项目上用到了很多 svg 图 设计师经常频繁改版 苦不堪言 于是就想到了把图片转成字体库来使用 使用图片的缺点 nbsp 1 图片加载速度慢 nbsp 2 图片大小固定 无法调节 nbsp 3 当代码重构或者图片目录位置改变时 需要一个个修改 繁琐而且容易出错 nbsp 字体库优点 nbsp 1

大家好,我是讯享网,很高兴认识大家。



最近项目上用到了很多svg图,设计师经常频繁改版,苦不堪言,于是就想到了把图片转成字体库来使用。

3. 上传我们制作的svg图标 

4. 点击我的项目,创建一个项目 

5. 在我的图标中,批量操作-全选-添加到购物车 




 

字体库引入有三种方式(取自iconfont官网介绍):

unicode引用

unicode是字体在网页端最原始的应用方式,特点是:

第一步:拷贝项目下面生成的font-face

第二步:定义使用iconfont的样式

第三步:挑选相应图标并获取字体编码,应用于页面

“iconfont”是你项目下的font-family。可以通过编辑项目查看,默认是”iconfont”。

font-class引用

font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。

与unicode使用方式相比,具有如下特点:

第一步:引入项目下面生成的fontclass代码:

第二步:挑选相应图标并获取类名,应用于页面:

symbol引用

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:

第一步:引入项目下面生成的symbol代码:

第二步:加入通用css代码(引入一次就行):

第三步:挑选相应图标并获取类名,应用于页面:

 

小讯
上一篇 2025-05-27 16:05
下一篇 2025-05-31 10:35

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/183922.html