font字体图标

2017-01-14 08:48:48来源:CSDN作者:songlf521人点击

font

字体图标能够网页添加别致的字体风格样式,而且也能够起到在不同浏览器中统一字体风格的作用。
它的扁平化设计,将网页从冗余、厚重和繁杂的装饰效果中解脱出来;它的兼容性好,从ie4就开始支持,几乎所有的浏览器都支持
那接下来小编给大家介绍字体图标的使用方式。

使用步骤

  • 1、先去网上下载我们需要的字体图标。(以阿里巴巴字体库为例)
    国外:
    https://icomoon.io/
    http://www.bootcss.com/p/font-awesome/

    国内: iconfont.cn 阿里巴巴字体库
    下载后一般是一个 iconfont.zip 文件夹

  • 2、放入到网站的站点内, font/
  • 3、在使用字体图标的html页面的css文件中作如下声明
    ···css
@font-face {font-family: 'iconfont';        src: url('iconfont.eot'); /* IE9*/        src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */        url('iconfont.woff') format('woff'), /* chrome、firefox */        url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/        url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */    }    /* url()中是 css文件相对于 font文件夹的路径 */

···
- 4、在html页面中使用字体图标
···html example

<i> &#343G; </i>   <!-- &#343G;为字体图标 -->

···

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台