一、前言                                

过去我们总通过图片来美化站点的LOGO、标题、图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式。

二、看看例子                           

/* 定义 */
@font-face {
font-family: 'MicrosoftYaHei';
src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */
src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */
url('MicrosoftYaHei.ttf') format('truetype'), /* Safari, Android, iOS */
url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
} /* 使用 */
body{
font-family: "MicrosoftYaHei";
}

说起让人感到十分惊讶,那就是IE4开始已经支持@font-face了,只是近些年才被大家广泛使用而已。

而@font-face的好处是即使系统没有该字体我们也能使用;缺点就是需要浏览器需要下载字体,因此消耗用户流量,并且首次下载会造成页面打开延迟。。

二、语法规则                           

/* 定义字体 */
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

font-family: <YourWebFontName> :自定义字库名称(一般设置为所引入的字库名),后续样式规则中则通过该名称来引用该字库。
 src :设置字体的加载路径和格式,通过逗号分隔多个加载路径和格式
 srouce :字体的加载路径,可以是绝对或相对URL。
 format :字体的格式,主要用于浏览器识别,一般有以下几种——truetype,opentype,truetype-aat,embedded-opentype,avg等。
 font-weight 和 font-style 和之前使用的是一致的。
src属性后还有一个 local(font name) 字段,表示从用户系统中加载字体,失败后才加载webfont。

src: local(font name), url("font_name.ttf")

三、字体格式                            

对于@font-face而言,兼容性问题就是各浏览器所能识别的字体格式不尽相同。
TrueType格式(.ttf)
  Windows和Mac上常见的字体格式,是一种原始格式,因此它并没有为网页进行优化处理。
 浏览器支持:IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+
OpenType格式(.otf)
 以TrueType为基础,也是一种原始格式,但提供更多的功能。<br/>
 浏览器支持:FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+
Web Open Font格式(.woff)
 针对网页进行特殊优化,因此是Web字体中最佳格式,它是一个开放的TrueType/OpenType的压缩版,同时支持元数据包的分离。<br/>
 浏览器支持:IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+
Embedded Open Type格式(.eot)
   IE专用字体格式,可以从TrueType格式创建此格式字体。
 浏览器支持:IE4+

SVG格式(.svg)
   基于SVG字体渲染的格式。
   浏览器支持:Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

为解决兼容性问题,Paul Irish写了称为Bulletproof的一个独特的@font-face语法:

 @font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

四、获取Web字体                        

Google Web FontsDafont.com下载.ttf格式字体,然后通过Font Squirrel来生成.woff等格式的字体。

以下站点也可以获取Web字体:

http://webfonts.fonts.com/

http://typekit.com/

http://kernest.com/

http://nicewebtype.com/fonts/

五、注意事项                           

1. @font-face遵循先定义后使用原则;

2. 由于中文字体太大,因此建议若中文LOGO还是使用图片。而英文LOGO则可使用@font-face代替图片;

3. @font-face无效有可能是字体的加载路径错误;

4. FireFox中@font-face的字体加载路径使用相对路径时,可能会失败,具体原因和解决办法如下:

a). 使用绝对路径可解决问题;

b). 在file uri scheme的情况下(file:///),由于FireFox默认的file uri origin策略十分严格,不同路径等级则无法访问。所以相对路径被视为跨域操作,因此字库加载失败。可通过 about:config 进入浏览器设置界面,然后将 security.fileuri.strict_origin_policy 设置为false即可;

c). 在http/https uri scheme的情况下(http:///或https:///),则需要对.eot、.ttf和.woff等字体文件的响应头中加入 Access-Control-Allow-Origin: * ,从而允许跨域请求。

六、Font Icon                        

大家应该使用过 &copy; 这类符号实体,从而在页面上显示一些无法通过键盘直接输入的符号。但这类符号实体是固化在浏览器中,没办法对其进行自定义,所以我们往往会使用图片来代替。不过通过@font-face来实现的Font Icon,我们可以自定义并使用各种符号实体——这些符号实体正确来说应该叫做Web实体符。

Web实体符不像HTML实体那样规定必须以 &entity_name 、 &#entity_number 形式表示,而是更灵活的表示方式(如字母A就代表某个字体图标等)

首先我们要获取为Font Icon而设计的字体

  1. Guifx字体

  2. WebSymbols字体

  3. Font Awesome

由robmadole和supercodepoet两大师在Bootstrap Icon的基础上将Icon图片换成Font Icon。

然后按第二节的方式使用即可。元素的font-family值为所定义的@font-face时,该元素下的字符则会自动渲染为对应的Font Icon。

七、自定义Font Icon                      

由于使用既定的Web字体库需要将整个字体库都下载下来,而实际上用到的Font Icon则只有数个而已,因此通过自定义Font Icon则可以个性化且减少字体库体积。

工具:Fontomas提供四种字体来制作Icon。分别是Entypo,IconicFill,IconicStroke,WebSymbolsRegular。
  Fontomas提供的是SVG格式字体,我们可以通过FontSquirrel或OnlineFontconverter来生成其他格式的字体。

另外还有fontforge工具来自定义Web字体,具体请见@张鑫旭的《fontforge制作自定义字体及在手机上应用举例

若要对已有的字体进行修改而不仅仅是提取的话可以是用IcoMoon,具体还是参考@张鑫旭的《如何灵活利用免费开源图标字体-IcoMoon篇

八、总结                             

若有纰漏请大家指正,谢谢。

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4320083.html  ^_^肥仔John

九、参考                             

http://www.w3cplus.com/content/css3-font-face
http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie
http://www.dynamicdrive.com/forums/showthread.php?63628-font-face-not-working-in-Firefox-5
http://www.w3cplus.com/css3/web-icon-with-font-face
http://www.webhek.com/tag/web-font/
http://www.paulirish.com

CSS3魔法堂:认识@font-face和Font Icon的更多相关文章

  1. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  2. CSS3魔法堂:说说Multi-column Layout

    前言  是否记得<读者文摘>中那一篇篇优美感人的文章呢?那除了文章内容外,还记得那报刊.杂志独有的多栏布局吗?  当我们希望将报刊.杂志中的阅读体验迁移到网页上时,最简单直接的方式就是采用 ...

  3. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  4. CSS3魔法堂:背景渐变(Gradient)

    一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 ...

  5. CSS3魔法堂:禁止用户改变textarea大小

    一.前言 在FF.Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体 ...

  6. CSS魔法堂:深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...

  7. CSS魔法堂:一起玩透伪元素和Content属性

    前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...

  8. CSS魔法堂:Box-Shadow没那么简单啦:)

    前言  说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...

  9. CSS魔法堂:重拾Border之——更广阔的遐想

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

随机推荐

  1. Yii2中的入口文件环境配置

    默认的Debug配置 在入口文件中 defined ( 'YII_DEBUG' ) or define ( 'YII_DEBUG', true ); defined ( 'YII_ENV' ) or ...

  2. Java设计模式8:迭代器模式

    迭代器模式 迭代器模式又叫做游标(Cursor)模式,其作用是提供一种方法访问一个容器元素中的各个对象,而又不暴露该对象的内部细节. 迭代器模式结构 迭代器模式由以下角色组成: 1.迭代器角色 负责定 ...

  3. 细说angular Form addControl方法

    在本篇博文中,我们将接触angular的验证.angular的验证是由form 指令和ngModel协调完成的.今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被 ...

  4. IE浏览器不能自动显示PDF文件的解决办法

    今天更新了Adobe的PDF Reader,更新后发现在网页上无法预览PDF文件了,点击PDF的连接,浏览器就会提示下载或者打开,感觉很不爽,经过一番百度,找到了解决办法,在这里分享一下. 打开IE浏 ...

  5. c基础回顾

    发现一个很好的c学习网站http://see.xidian.edu.cn/cpp/html/ 做了一些练习: #include <string.h> #include <stdio. ...

  6. 每天一个linux命令(59):rcp命令

    rcp代表“remote file copy”(远程文件拷贝).该命令用于在计算机之间拷贝文件.rcp命令有两种格式.第一种格式用于文件到文件的拷贝:第二种格式用于把文件或目录拷贝到另一个目录中. 1 ...

  7. 知方可补不足~SQL为大数据引入分区表

    回到目录 一些概念 分区表在oracle和sqlserver中都上存在的,当数据表的数据量过大时,上千万,上亿的数据,在进行数据查询时需要显得比较慢,性能很差,这时是时候引入分区表了,分区表顾名思义, ...

  8. atitit 英文与中文与阿拉伯文的简化解决方案.docx

    atitit 英文与中文与阿拉伯文的简化解决方案.docx 1. 英文与中文与阿拉伯文的简化意义1 2. 简化的主要方法分类2 2.1. 同音替代法(比如o2o)2 2.2. 符号法(比如英文i18n ...

  9. Atitit 图片 验证码生成attilax总结

    Atitit 图片 验证码生成attilax总结 1.1. 图片验证码总结1 1.2. 镂空文字  打散 干扰线 文字扭曲 粘连2 1.1. 图片验证码总结 因此,CAPTCHA在图片验证码这一应用点 ...

  10. Java 集合 — HashMap

    HashMap 无序(每次resize的时候都会变) 非线程安全 key和value都看可以为null 使用数组和链表实现 查找元素的时候速度快 几个重要属性: loadFactor:用来计算thre ...