资讯专栏INFORMATION COLUMN

css可变色图标及原理分析

RebeccaZhong / 3377人阅读

摘要:只是,仅支持这一种格式是专门为开发而设计的字体,其字体尺寸更小,加载更快,应该优先使用。字体图标技术的实现就是把通常的字符集映射成了另外的图标形状例如把映射成了

本文的目标是:使用css可以控制图标的颜色,大小

需要工具:png转svg工具(如果ui给的svg就更好了) iconfont(图标转代码)

第一步,把图标转成svg格式的

打开网址 https://www.bejson.com/conver...

上传

下载

第二步,使用iconfont生成代码

打开网址:https://www.iconfont.cn

点击图标管理->我的图标,如下图

进入到我的图标之后,点击上传icon,如下图

点此上传 选中svg文件,

上传之后,点击去除颜色并提交

上传完之后就会自动回到图标管理页,点击批量操作->批量加入购物车,然后进入购物车

在购物车中,点击下载代码

第三步,生成的代码运用到项目中

生成的项目目录如下:

点击demo_index.html,可以查看官网给出的使用方式

我项目中使用的是第二种,所以只介绍第二种使用方式

第一步,把iconfont.css复制到你的css样式中

第二步,根据iconfont.css中你需要的字体,把生成的项目中的字体文件和svg文件复制到你的项目目录中,需要和css文件同级目录,否则需要修改iconfont.css中引入字体文件的路径,默认情况下引入下图的字体(如果不需要兼容ie8和ios4.1-,可移除相应的字体,详情看下面的介绍)

第三步,使用


//或者

改变样式的话

span{
    color:red
}
i{
    color:red
}
最后,原理分析 1. 理解@font face规则

@font face的本质是变量,该规则支持的css属性有很多,我们常用的有:font-family,src,font-style,font-weight

首先来看一下,font-family,这里的font-family可以看成一个变量,名字可以随便取,比如用一个$符,但要注意不要覆盖系统已经存在的字体

/*font-family如果是符号的话需要用引号包起来*/
@font-face{
    font-family:"$"
}
/*使用iconfont生成的@font-face规则font-family如下:*/
@font-face{
    font-family:"iconfont"
}

然后看下我们的重点src属性,src属性用来引入字体资源,引入的字体资源可以使本地的(使用local()引入),也可以是外链字体(使用url()引入),注意local要ie9及以上版本才支持

这里我们重点来看下url功能符

@font-face{
    font-family:"icon";
    src:url("icon.eot") format("eot");/*ie6-8*/
    src: url("icon.eot#iefix") format("embedded-opentype"),
        url("icon.woff2") format("woff2")
        url("icon.woff") format("woff"),
        url("icon.ttf") format("typetrue"),
        url("icon.svg#icon") format("svg");
}

//format的作用是让浏览器提前知道加载字体的格式,以决定是否加载字体

上面代码一共出现了五种字体格式,分别是eot,woff,woff2,ttf,svg

svg格式是为了兼容ios4.1及之前的版本,现在的ios版本都到11了,所以完全可以舍弃

eot是ie私有的,所有版本的ie都支持eot格式,并不是只有ie6-8。只是,ie6-ie8仅支持eot这一种格式

woff(web open font format)是专门为web开发而设计的字体,其字体尺寸更小,加载更快,应该优先使用。Android4.4开始全面支持

woff2是woff的二代,字体文件尺寸更小,但是仅chrome和firefox支持的比较好

ttf作为系统安装字体的格式,兼容性很好,但体积较大

综上,我们得出以上结论

svg格式果断舍弃

如果无需兼容ie8,eot格式舍弃

如果无需兼容Android4.3以前的版本,ttf格式舍弃

2. iconfont生成字体图标原理

iconfont生成的字体如下:

@font-face {
    font-family: "iconfont";
    src: url("iconfont.eot?t=1547714990292");
    /* IE9 */
    src: url("iconfont.eot?t=1547714990292#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP4AAsAAAAACBgAAAOrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqEJINPATYCJAMICwYABCAFhG0HLhvzBhHVm0XJviiwjblCNx4e1RAbqvoScwd3wUWGawQq7bPvQzw8v+7p3Hnv/52F1bbLColMUKi7FapgBBOVZ2CcDsadACIZ7O93+tTc9nW/JuKoRNUmmiAW/joh4qVzC50Q2dyMtzUqQrEk53k/fUfSbiDkVwD8cbjXpgc4313a5Tjnoi7AOJAC3QPXAgmkD/LJv+Mfxi5oibsJNNLNEDGmNWWOUmYOCsSW0/qVyoxcbkgNpVCvmJnFaTVlcaQ4A3Aq+Pn4SjFKCrXEzJixbuwaIz4AKyLtrnZb4iEwptOCzSNhCDIxp1I/TYr8QySNVH/Wi22lBh8uVeXRN/uPRxB1Jr8JxHahXxPDYV4qdQEy7bmG94PORFqVlcjqH+baAbu7AM71qavD+25xUwr1TdTSXbmOgjo6aOTEtdzzhlD07Wfwh3kNLWxrj7Bjinp06gAWdAde7N/YCAfvirOKDa3s6mN/sJ8ePobHHoaNg/S9S30z1dTNb5s47+kQFh7MCP6N69BdPqII7qzvF2OXbAPsvszfu4zfS9cuo4/fe41Hu47H1ORtqTPw0k8353NTd41KqYcHt8d4mj81ujIHd/JT9939WKmT19BaV8T0GUgcUlMYh5QtAZn08c/zD3y/2idiavJz5oyGdIuw8C6CcGkCHZZGgb2tr32WF30s8se1QLHTBzjI4vpTFv32/uArMNIVuOMe/9uiattoCCv1s7JmyNmnsM132Ghb8VY9/qd0iaO4yFgqGsi3pQVkDaEjVc7aqf7juAtroRNgSjfcFDl2BGnfaPlxuxjJ20utDr0Oy/3YZ/qLFceoimHNsa4yGnacG0Tnm91qCBkydLHIzmuI+HxPexAwAlQofaTjX/0d42/y/5Y3r/8vYQbPKfBKYK1QBnQzUt67IfiHjI51WWOZiiIrjMpw4Zr0bkoaaYQKw+ZW3g41tiXRhpIzIBQa6ApJqQ8yY4dATWPDoK40HBoZbPz8xlrbJYncEIMcABBauAqFZu5C0sJjZMa+gZp2vkNdi0jQyLwgV2yM6hdRjWbUgg7MH6LdGtkqUWHqDf27aE6zAvwL+YwumPoxH7piQ55izPnxswgB8VZhBfthKRvsvCW00geRfRkGqrpRb7faKaMZtaAD5g+i3Rp5zUUVvn9D/y6aG2qqtC/kM3YOJr2xA/LKb51qbuWQ8+NnIgSItwpWoMVi+TewV3dLaKUXBnj3xYAaUVd+v7ywvt0WaMSUFGHlJnlH0f+uAwA=") format("woff2"), url("iconfont.woff?t=1547714990292") format("woff"), url("iconfont.ttf?t=1547714990292") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url("iconfont.svg?t=1547714990292#iconfont") format("svg");
    /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 18px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;
}

.icon-play:before {
    content: "e601";
}

这里有两个需要关注的东西,一个是字体,另一个是字符,这两个东西就是字体图标技术的本质。

字体的本质是字符集与图形的一种映射关系。

字体图标技术的实现就是把通常的字符集映射成了另外的图标形状.
例如把 e601映射成了

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117255.html

相关文章

  • SVG vs Image, SVG vs Iconfont

    摘要:结论绿色部分表示比略胜一筹的地方,黄色部分表示有所欠缺的地方,灰绿色表示差不多。兼容性列表可以良好地支持多色及多色变化。以为例说明便捷使用。综上结论选择或许是一个不错地选择去替代的使用方式。 这可能是个别人写过很多次的话题,但貌似由于兼容性的原因?图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式?希望通过自己新瓶装旧酒的方式能重新引导一下问题。 SVG vs I...

    kel 评论0 收藏0
  • SVG vs Image, SVG vs Iconfont

    摘要:结论绿色部分表示比略胜一筹的地方,黄色部分表示有所欠缺的地方,灰绿色表示差不多。兼容性列表可以良好地支持多色及多色变化。以为例说明便捷使用。综上结论选择或许是一个不错地选择去替代的使用方式。 这可能是个别人写过很多次的话题,但貌似由于兼容性的原因?图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式?希望通过自己新瓶装旧酒的方式能重新引导一下问题。 SVG vs I...

    paulquei 评论0 收藏0
  • SVG vs Image, SVG vs Iconfont

    摘要:结论绿色部分表示比略胜一筹的地方,黄色部分表示有所欠缺的地方,灰绿色表示差不多。兼容性列表可以良好地支持多色及多色变化。以为例说明便捷使用。综上结论选择或许是一个不错地选择去替代的使用方式。 这可能是个别人写过很多次的话题,但貌似由于兼容性的原因?图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式?希望通过自己新瓶装旧酒的方式能重新引导一下问题。 SVG vs I...

    RayKr 评论0 收藏0
  • CSS练习】IT修真院--练习5-护工个人界面

    摘要:任务五一个最常见的移动端页面完成的事情学习张鑫旭世界相关章节张鑫旭系列了解通配符选择器性能优化浏览器渲染原理学习各属性及效果完成任务五学习编码规范编码规范并按照编码规范优化代码完成深度思考计划的事情找时间把前面任务的官方提供链接过一遍,查缺 任务五、 一个最常见的移动端页面 完成的事情 float学习 张鑫旭《CSS世界》相关章节 张鑫旭 float系列 了解CSS通配符 &...

    Jonathan Shieber 评论0 收藏0
  • 像打字一样插入图标-iconfont

    摘要:简介是什么就像名字一样,就是图标字体,像雅黑字体,思源字体一样,这种字体就是由图标构成有何优势轻量性一个图标字体比一系列的图像特别是在屏中使用双倍图像要小。问题很小创作自已的字体图标很费时间,重构人员后期维护的成本偏高。 简介 - iconfont是什么? 就像名字一样,iconfont就是图标字体,像雅黑字体,思源字体一样,这种字体就是由图标构成~ - 有何优势? 1、轻量性:一个图...

    warkiz 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<