zoukankan      html  css  js  c++  java
  • Font Awesome 字体使用方法, 兼容ie7+

    WebFont 技术可以让网页使用在线字体,而无需使用图片,从而有机会解决开头设计师提到的问题。它通过 CSS 的@font-face语句引入在线字体,使用 CSS 选择器指定运用字体的文本,与此同时专用于 Web 展示的 woff 格式字体也得到各大浏览器厂商支持,进一步减少了字体的体积。在国外,WebFont 已经非常流行了,大量的网站使用了 WebFont 技术,而业界大佬 Google 也顺势推出的免费 WebFont 云托管服务,这一切均带动了国外字体制作行业的高速发展。

    一、首先介绍Font Awesome 字体的使用场景

    先截图几张,大家看一下效果(红色框内即使用了web font)

        

    二、链接一个下载地址:

    http://www.thinkcmf.com/font/index.html

    三、解压后的文件目录格式

        

    css文件夹目录

        

    font-awesome.css----未压缩的css文件

    font-awesome.min.css----压缩后的css文件

    font-awesome-ie7.min.css----压缩后兼容ie7+的css文件

    fonts文件夹目录

    说明一下各个文件的功能

    一、OpenType(.otf)格式:

    .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

    二、Embedded Open Type(.eot)格式:

    .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

    三、SVG(.svg)格式:

    .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

    四、TureTpe(.ttf)格式:

    .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

    五、Web Open Font Format(.woff)格式:

    .woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

    这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

    里面包含了四个文件夹,不过我们只需要的就用css  , fonts 两个文件夹的内容就ok

     四、接下来就是重要的步骤了--使用方法

    步骤一:链接css文件

    
    
    <link rel="stylesheet" type="text/css" href="Awesome/css/font-awesome.min.css"/>

    <link rel="stylesheet" type="text/css" href="Awesome/css/font-awesome-ie7.min.css"/> /*兼容ie7+*/

    步骤二:开始添加图标(注意:fa 是一定要添加的)

    <i class="fa fa-camera-retro"></i> fa-camera-retro

    显示效果:

    使用起来非常方便呢!哦,对了最后附上一个图标参考网址:http://www.thinkcmf.com/font/想用什么图标查询即可食用

    最后在加一点:图标可以当普通的字体使用哦,尝试设置一下 color 属性   text-align 属性看看吧

  • 相关阅读:
    NHibernate OR EES ,不能比较的比较
    Dubbo实现原理和实现机制
    xxljob学习1:整体架构
    xxljob学习2:用户端注册
    xxljob学习4:任务调度器
    xxljob学习3:服务端一次调度
    jQuery源码学习(1)——addClass
    jQuery 选择器项目实例
    javascript权威指南读书笔记(1)——对象
    easyui tabs源码阅读(未完待续)
  • 原文地址:https://www.cnblogs.com/guoyinli/p/6194951.html
Copyright © 2011-2022 走看看