作为第一篇博文，写这个 我快要被气炸，好吧，废话不说了

昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome下载后这些文件，现在的版本是4.2，Font Awesome从4.1.0版本开始不再支持IE7， 但更早的版本仍然支持

官网和各种帖子也写了些使用方法，就是没有太清楚 不然我也不会被搞得凌乱掉，

一，首先将css文件复制到我们项目css文件夹中，在<head>中引入奥森图标的css样式 这个毋庸置疑，至于引入压缩版还是不压缩版 看心情

这里有个ie7的压缩版，是考虑到还在坚持使用ie7的古董们而出现的，直接引入即可

同样 网上有说可以引入CDN 只是我没有测试成功

<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

二，使用图标 对应着奥森图标网站寻找class

使用方法如<i class="fa fa-wifi"></i> 前面的fa是必须的 后面的class是对应图标的class

三，查看下项目 蛋疼的是图标呢， 哪去了。。。。查看下控制台

一堆报错，显示没有找到fonts这个文件夹下的字体， 该说 我没有引入fonts里面的东西啊 为什么会出现这个报错，   这就是这个图标的特殊地方 引入Awesome的css文件项目会自动寻找fonts这个文件夹，现在把fonts文件夹引入到项目（直接把文件夹复制到项目 别改了文件夹名字 昨天就是fonts改成font 我擦 搞得气死了 这么easy的事情竟然找了许久）

OK。。图标成功出现了

CSS特殊字体使用方法

好的 上面这个图标问题解决了，再来看下网页中引入特殊字体时使用方法吧，

特殊字体的引入靠@font-face语句实现 这些字体浏览器的支持还是良好的，低至IE6/IE4都支持，很不错，兼容问题就不要考虑了

主要格式四种（.eot、.woff、.svg、.ttf），为什么会有四个 是针对不同浏览器各自为政出现的，不说太详细 都引入就对了，引入各式

1，YourWebFontName:下载的默认字体名称；

2，source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

3，format：此值指的是你自定义的字体的格式，也就是上面说的四种格式 帮助各种浏览器识别

4，weight和style：即字体的粗细和样式。

OK。。。 举个例子，下载个raphaelicons字体，下载后一个fonts文件夹

两个txt文本不考虑，有四个字体，现在在css样式中引入四种字体

该庆祝下。。 已经把字体成功引入样式，看下结构

注：特殊字体使用需要使用 data-icon="" 来定义图标，相对应的H就会变成所下字体的图标，定义css样式

很关键的一部在样式中使用字体 font-family:"Raphaelicons"; 如果将引入的字体使用 那图标的样式就是不出现，好看的图标出现了 定义的H变成了 如下

美妙吧。。

其他特殊字体的引入也是如此，先@font-face引入字体 再data-icon定义字体 定义data-icon样式使用字体 欧卡。

奥森图标和CSS特殊字体使用方法的更多相关文章

  1. CSS在线字体库，外部字体的引用方法

    目录: 1:CSS家族五大字体 2:360和谷歌外部字体引用方法 3:谷歌外部字体引用方法详解 4:@font-face用法详解 一: {font-family:serif,sans-serif,fa ...

  2. CSS在线字体库，外部字体的引用方法@font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  3. CSS 文本字体颜色设置方法(CSS color)

    CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...

  4. CSS font字体知识学习

    字体系列 [1]5种通用字体系列:拥有相似外观的字体系列 serif字体:字体成比例,且有上下短线(衬线字体),包括Times\Georgia\New century Schoolbook sans- ...

  5. Font Awesome 字体使用方法， 兼容ie7+

    WebFont 技术可以让网页使用在线字体,而无需使用图片,从而有机会解决开头设计师提到的问题.它通过 CSS 的@font-face语句引入在线字体,使用 CSS 选择器指定运用字体的文本,与此同时 ...

  6. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  7. css中文字体乱码解决方案

    css中文字体乱码解决方案:把css编码和html页面编码统一起来.如果html页面是utf-8.css.js也统一成utf-8编码.还有一个避免中文乱码的办法就是把中文字体写成英文来表示 css中文 ...

  8. css页面字体替换源代码和页面显示不一样问题解决

    2018年8月27日19:58:12 css指定字体的时候,可以自制的字体,比如字符替换,比如 0没有被替换,其他在源代码被替换对应的字母,但是现实的时候在替换成正确的数字 很简单,防爬虫,但是... ...

  9. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

随机推荐

  1. python 读写 json文件

    json的优势: 1. 数据体积方面. JSON相对于XML来讲,数据的体积小,传递的速度更快些. 2. 传输速度方面. JSON的速度要远远快于XML 3. 数据格式 数据格式比较简单, 易于读写, ...

  2. Input 银行卡验证

    $("#card_num").keyup(function(){ var op=""; var t=$("#card_num").val() ...

  3. 解决 三星Note3 桌面小部件不实时更新/不刷新 的问题

    机型及问题描述:我的是三星note3 (国行 SM-N9008V),已ROOT,安装了LBE安全大师.在桌面小部件中,有些不会实时更新.比如有 滴答清单(办过的事项无法勾选),百度云音乐(歌曲播放更新 ...

  4. nl 命令

    nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...

  5. 【问题】:spring cloud sleuth日志组件冲突问题

    在使用spring cloud sleuth的时候,启动工程报错如下: 根据错误信息明显就是jar包冲突,spring boot默认用的是logback,所以移除其中一个依赖就可以了,修改pom依赖为 ...

  6. Android 下拉刷新上拉载入 多种应用场景 超级大放送（上）

    转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉载入,网上的Demo太多太多了,这 ...

  7. android菜鸟学习笔记20----Android数据存储(四))Android数据库操作

    Android内置了一个名为SQLite的关系型数据库,这是一款轻量型的数据库,操作十分简便.SQLite与别的数据库不同的是,它没有数据类型.可以保存任何类型的数据到你所想要保存的任何表的任何列中. ...

  8. Chrome Native Messaging 与本地程序之间的通信

    最近项目上出现了web打印不稳定的问题,师父决定web调用本地打印程序,在查阅了相关资料和加了几个相关群咨询后得知新版的chrome不支持NNAPI了,最好用Native Messaging来处理,经 ...

  9. Python菜鸟之路：Python基础——函数

    一.函数 1. 简介 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率. 2. 组成 函数代码块以 def 关键词开头,后接函数名和圆括号( ...

  10. Java基础 - 常量与变量

    A:常量 内存中的一小块区域,在程序执行过程中,其值不可以发生改变的量称为常量 常量的几种表现形式: a:字符串常量 "HelloWorld" b:整数常量 12 c:小数常量 1 ...