Awesome图标和css特殊字体的使用方法

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

昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome下载后这些文件,

现在的版本是4.2,Font Awesome从4.1.0版本开始不再支持IE7, 但更早的版本仍然支持,如果需要考虑IE7有下面解决方法

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

我这里下的有个ie7的压缩版,有些地方下的没有这个文件,这个是考虑到还在坚持使用ie7的古董们而出现的,直接引入即可

同样也可以用CDN引入,官网有介绍。

二,使用图标这个不需要太多介绍,对应着奥森图标网站寻找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样式  使用字体 欧卡。。。

时间: 2024-07-30 00:16:54

Awesome图标和css特殊字体的使用方法的相关文章

CSS定义字体间距 字体行与行间距

CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性 属性含义 属性值 Word-spacing 定义了各个单词之间的间距 Normal<length>必须以长度为单位 Letter-spacing    定义了每个字母之间的间距 同上 Text-decoration 定义文字的"装饰"样式 None|underline|overline| line-through|blin

CSS 中文字体的英文名称 (simhei, simsun) 宋体 微软雅黑

华文细黑:STHeiti Light [STXihei]华文黑体:STHeiti华文楷体:STKaiti华文宋体:STSong华文仿宋:STFangsong俪黑 Pro:LiHei Pro Medium俪宋 Pro:LiSong Pro Light标楷体:BiauKai苹果俪中黑:Apple LiGothic Medium苹果俪细宋:Apple LiSung Light Windows的一些: 新细明体:PMingLiU细明体:MingLiU标楷体:DFKai-SB黑体:SimHei宋体:Sim

[转] css自定义字体font-face的兼容和使用

@Font-face目前浏览器的兼容性: Webkit/Safari(3.2+) TrueType/OpenType TT (.ttf) .OpenType PS (.otf): Opera (10+) TrueType/OpenType TT (.ttf) . OpenType PS (.otf) . SVG (.svg): Internet Explorer 自ie4开始,支持EOT格式的字体文件:ie9支持WOFF: Firefox(3.5+) TrueType/OpenType TT (

05使用CSS设置字体和文本样式

使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|serif|sans-serif name表示字体名称,可指定多种字体,用空格隔开.按优先顺序排列.如果字体名称包含空格,则应该使用括号()括起来. font是一个复合属性,所谓复合属性是指该属性能够设置多种字体属性,用法如下: font:font-style||font-variant||font-we

css中文字体与英文写法对应列表

css中文字体与英文写法对应列表:在写css代码的时候,如果需要中文字体,当然可以直接写中文字体的名称,但是在IE6下可能会出现问题,所以最好要用英文名称,下面就是主要中文字体对应的英文名称列表.中文字体对应的英文写法: 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 俪黑 Pro:LiHei Pro Medium 俪宋 Pro:LiSong Pro Light 标楷体:Biau

css中字体单位px,pt,em ,rem,百分比之间的区别和用法

css中字体单位px,pt,em ,rem,百分比之间的区别和用法 px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了 转换公式: pt=px乘以3/4 倍数em=倍数x16px 注意:1em=16px.那么12px=0.75em,10px=0.625em.   1.em的用法 在代码重写的过程中

css中文字体乱码解决方案

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

div css文字字体行高行距 深入理解css行间距设置

div css文字字体行高行距 深入理解css行间距设置 div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性.(体感音乐) 要使得每行的文字一定的间距距离所以可以通过line-height样式实现.接下来DIVCSS5通过DIV CSS实例实现字体文字上下间距. 相关扩展CSS教程: css line-height div css字间距 为了观察到行距设置效果,新

(转)CSS定义字体间距 字体行与行间距

源网址:http://www.cnblogs.com/jian1982/archive/2010/07/03/1770349.html CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性 属性含义 属性值 Word-spacing 定义了各个单词之间的间距 Normal<length>必须以长度为单位 Letter-spacing 定义了每个字母之间的间距 同上 Text-decoration