在前端的网页制作中,经常要使用到小图标来美化自己的网页,或者使用自定义的字体来美化,现在来看看如何用css3的属性font-face来结合阿里的矢量库,首先进入阿里的矢量图库,将自己选好的图标加入到购物车内,比如下载csdn的图标:
接着点击下载代码,则会获得一个文件夹,主要用到的文件如下:
其中的除了.css文件外,都是自定义的字体文件,里面包含着你所下载的图标,打开.css文件会发下有如下css代码:
@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1541600405827'); /* IE9*/
src: url('iconfont.eot?t=1541600405827#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ8AAsAAAAABoAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY7g0b/Y21hcAAAAYAAAABLAAABcOY1stFnbHlmAAABzAAAAIwAAACM6BEYk2hlYWQAAAJYAAAALwAAADYTMW8naGhlYQAAAogAAAAcAAAAJAfeA4NobXR4AAACpAAAAAgAAAAICAAAAGxvY2EAAAKsAAAABgAAAAYARgAAbWF4cAAAArQAAAAeAAAAIAEOADJuYW1lAAAC1AAAAUUAAAJtPlT+fXBvc3QAAAQcAAAAHQAAAC5khGV0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8j7lZW7438AQw9zA0AAUZgTJAQDfAwv7eJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf8r7/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBGPgmZAAACAAD/gAQAA4AACwAlAAABFgAXBgAHJgAnNgABNw4BIyImNz4BFzIWFzcuASMOAQcGFhcyNgIA2gEhBQX+39ra/t8FBQEhAZgLGlUlZWUHC4JcKlYXDiBOOp7nEgqyrzxVA4AF/t/a2v7fBQUBIdraASH9FWwHCUhKUkEBCwdxCAkBh39tigIJAAAAeJxjYGRgYADiKIuvV+L5bb4ycLMwgMANTtGpCPp/AwsDcwOQy8HABBIFABUkCTIAeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAABGAAB4nGNgZGBgYGJQA2IGMIuBgQsIGRj+g/kMAAxkAUEAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgSW5OCWPgQEACeIBwgAAAA==') format('woff'),
url('iconfont.ttf?t=1541600405827') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1541600405827#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-csdn:before {
content: "\e50d"; }
从代码中可以看到,不同的自定义的字体文件对应着不同的浏览器内核,而在最后一行,用css代码命名标出是csdn图标的,所以不用担心找不到对应的图标了。将上述文件拷进自己的项目,需注意的是,不知道怎么回事,.css里选择器用原来的名字会不显示效果,这里需要把.css里的选择器改名:
@font-face {
font-family: "csdn1";
src: url('iconfont.eot?t=1541600405827'); /* IE9*/
src: url('iconfont.eot?t=1541600405827#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ8AAsAAAAABoAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY7g0b/Y21hcAAAAYAAAABLAAABcOY1stFnbHlmAAABzAAAAIwAAACM6BEYk2hlYWQAAAJYAAAALwAAADYTMW8naGhlYQAAAogAAAAcAAAAJAfeA4NobXR4AAACpAAAAAgAAAAICAAAAGxvY2EAAAKsAAAABgAAAAYARgAAbWF4cAAAArQAAAAeAAAAIAEOADJuYW1lAAAC1AAAAUUAAAJtPlT+fXBvc3QAAAQcAAAAHQAAAC5khGV0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8j7lZW7438AQw9zA0AAUZgTJAQDfAwv7eJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf8r7/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBGPgmZAAACAAD/gAQAA4AACwAlAAABFgAXBgAHJgAnNgABNw4BIyImNz4BFzIWFzcuASMOAQcGFhcyNgIA2gEhBQX+39ra/t8FBQEhAZgLGlUlZWUHC4JcKlYXDiBOOp7nEgqyrzxVA4AF/t/a2v7fBQUBIdraASH9FWwHCUhKUkEBCwdxCAkBh39tigIJAAAAeJxjYGRgYADiKIuvV+L5bb4ycLMwgMANTtGpCPp/AwsDcwOQy8HABBIFABUkCTIAeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAABGAAB4nGNgZGBgYGJQA2IGMIuBgQsIGRj+g/kMAAxkAUEAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgSW5OCWPgQEACeIBwgAAAA==') format('woff'),
url('iconfont.ttf?t=1541600405827') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1541600405827#iconfont') format('svg'); /* iOS 4.1- */
}
.csdn {
font-family:"csdn1" !important;
font-size:16px;
font-style:normal;
color: brown;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-csdn:before {
content: "\e50d"; }
在html里引用:
<p class="csdn icon-csdn">Hello world!</p>
效果为:
今天的文章Iconfont阿里矢量图库结合css3属性font-face的使用分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10049.html