对于多个小图标,往往会采用多个图合在一张大图的方式,这种图称之为精灵图
可以减少客户端对服务器的图片http请求
background-image
background-position
以王者荣耀(https://pvp.qq.com/ )官网中的下载游戏为例
通过设置背景图和背景图定位实现
轻量级:一个图标字体比一系列的图像要小,一旦字体加载了,字体图标马上就会渲染出来,减少了服务器请求
灵活性:字体图标本质上是文字,可以设置颜色、阴影、透明等效果
兼容性:几乎支持所有浏览器
并不能完全代替精灵图技术,字体图标只适用于小图标icon
复杂一些的小图片还是采用精灵图
icomoon https://icomoon.io/
阿里iconfont https://www.iconfont.cn/
以iconfont为例
svg、ttf、woff、woff2
放到根目录bashfont_3681988_2s9pxtazng7 ├── demo.css ├── demo_index.html ├── iconfont.css ├── iconfont.js ├── iconfont.json ├── iconfont.svg ├── iconfont.ttf ├── iconfont.woff └── iconfont.woff2
iconfont.css
文件,然后复制?t=
中的这一串数字,这个就是时间戳@font-face { font-family: "iconfont"; /* Project id 3681988 */ src: url('iconfont.woff2?t=1681032637031') format('woff2'), url('iconfont.woff?t=1681032637031') format('woff'), url('iconfont.ttf?t=1681032637031') format('truetype'), url('iconfont.svg?t=1681032637031#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .myicon-renminbi:before { content: "\e66b"; }
common.css
中/*阿里字符图标 start*/ @font-face { font-family: "iconfont"; /* Project id 1479300 */ src: url('../font/iconfont.woff2?t=1681032637031') format('woff2'), url('../font/iconfont.woff?t=1681032637031') format('woff'), url('../font/iconfont.ttf?t=1681032637031') format('truetype'), url('../font/iconfont.svg?t=1681032637031#iconfont') format('svg'), } .iconfont, [class^="myicon"], [class*="myicon"] { font-family: "iconfont" !important; font-size: 12px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .myicon-renminbi:before { content: "\e66b"; }
在common.css
中引入后,页面具体使用时只需要书写类名即可
<p class="myicon-renminbi"></p>
通过CSS3属性选择器和伪类选择器添加公用样式,然后使用伪类选择器单独添加字体图标
[class^="icon"]:before, [class*="icon"]:before{ font-family:"iconfont" !important; font-size:1.6rem; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ... .iconsd:before { content: "\e610"; } .iconwendu:before { content: "\e788"; }
本文作者:RKLS
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!