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 属性看看吧

  • 相关阅读:
    [Algo] 306. Check If Linked List Is Palindrome
    [Algo] 42. Partition Linked List
    [Algo] 20. Search In Unknown Sized Sorted Array
    [LC] 1167. Minimum Cost to Connect Sticks
    [LC] 212. Word Search II
    安装oracle developer 10g 时报错,提示must be 5.0, 5.1, 5.2 or 6.1 . Actual 6.2
    APP-INV-05577
    客户化的并发程序出现黄条警告,并无法输出内容
    EBS Concurrent Manager(并发管理器)异常处理[final]【转】
    oracle 通过透明网关gateway 连接sqlserver
  • 原文地址:https://www.cnblogs.com/guoyinli/p/6194951.html
Copyright © 2011-2022 走看看