css基础08-字体图标
本文共 1902 字，大约阅读时间需要 6 分钟。
越学心里越没底，毕竟知识的增长伴随着问题的增长，所以我应该感到幸运，我学到东西了！
可以像使用字体一样，使用图标；轻量性，灵活性，兼容性。
矢量，支持所有现代浏览器，低版本IE浏览器；智能渲染单色和CSS3的渐变色；版权上有限制，创作字体图标费时间。@font-face（有固定格式代码）。www.iconfont.cn 阿里巴巴字体图标库 （需要登录） https://icomoon.io/app/#/select 字体图标在线生成 下面是最后生成的压缩包解压后，文件夹里面的内容，其中有用的有
fonts和style.css，这两个拷贝到项目文件夹里面就可以了！
/*下面是css文件里面的代码，这部分是固定的格式*/@font-face { font-family: 'icomoon'; /*这个可以更改*/ src: url('../fonts/icomoon.eot?g2i2pg'); src: url('../fonts/icomoon.eot?g2i2pg#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?g2i2pg') format('truetype'), url('../fonts/icomoon.woff?g2i2pg') format('woff'), url('../fonts/icomoon.svg?g2i2pg#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block;} /*这部分不太重要！只有font-family比较重要！*/[class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} /*这个是字体的编码*/.icon-all:before { content: "\e900";}.icon-auto:before { content: "\e901";}.icon-bold:before { content: "\e902";}.icon-bussiness-man:before { content: "\e903";}.icon-dollar:before { content: "\e904";}.icon-inspection:before { content: "\e905";}.icon-integral:before { content: "\e906";}.icon-language:before { content: "\e907";}.icon-left-button:before { content: "\e908";}.icon-loading:before { content: "\e909";}.icon-message-center:before { content: "\e90a";} /*定义样式的时候！*/ span{ font-size: 10rem; color: #e74c3c; text-shadow: 0 0 1rem gainsboro; } span:last-child{ font-size: 5rem; color: #449fdb; } 转载地址：http://vgjv.baihongyu.com/
你可能感兴趣的文章