字符集图标&＃xff1a;
将网页上常见的icon做成font&＃xff08;字符集&＃xff09;&＃xff0c;以字体的方式插入到网页上&＃xff0c;作用是减轻服务器负担&＃xff0c;减少宽带。
我最常在这两个网站上下载字体图标&＃xff1a;
https://icomoon.io/app/#/select
https://www.iconfont.cn/plus
具体使用方法&＃xff0c;可以参考字体下载后的示例&＃xff0c;比如在icoMoon上我选了两个字体图标&＃xff0c;点击下载&＃xff1a;
下载的文件解压后&＃xff0c;会看到这些东西&＃xff1a;
文件虽然很多&＃xff0c;但其实大部分是为了展示示例页面的&＃xff0c;如果你想将字体引用到自己的项目里&＃xff0c;主要就是两步&＃xff1a;
第一步&＃xff0c;把style.css里字体相关的样式拷贝到自己的样式表里&＃xff1a;
&＃64;font-face {font-family: &＃39;icomoon&＃39;;src: url(&＃39;fonts/icomoon.eot?hwh5d3&＃39;);src: url(&＃39;fonts/icomoon.eot?hwh5d3#iefix&＃39;) format(&＃39;embedded-opentype&＃39;),url(&＃39;fonts/icomoon.ttf?hwh5d3&＃39;) format(&＃39;truetype&＃39;),url(&＃39;fonts/icomoon.woff?hwh5d3&＃39;) format(&＃39;woff&＃39;),url(&＃39;fonts/icomoon.svg?hwh5d3#icomoon&＃39;) format(&＃39;svg&＃39;);font-weight: normal;font-style: normal;
}[class^&＃61;"icon-"], [class*&＃61;" icon-"] {/* use !important to prevent issues with browser extensions that change fonts */font-family: &＃39;icomoon&＃39; !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61; */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-headphones:before {content: "\e910";
}
.icon-music:before {content: "\e911";
}
第二步&＃xff0c;在需要使用字体的地方加上类名&＃xff0c;如&＃xff1a;
<span class&＃61;"icon-headphones">span>
然后别忘了在该html中&＃xff0c;引入你添加了字体的样式表就可以啦~
京公网安备 11010802041100号