文章目录[隐藏]
在 CSS3 之前 ，web 设计师必须使用已在用户计算机上安装好的字体。@font-face 可以让前端工程师随心所欲的使用各种字体，字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。@font-face 不仅仅可以让我们的前端文字变得更加丰富，我们在前端页面中使用的很多图标也可以通过@font-face实现。
@font-face的语法规则：
@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }
参数说明
YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。
自定义字体格式
.ttf(TrueType格式)：是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
.otf字体：被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
.woff (Web Open Font格式): 针对网页进行特殊优化，Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
.eot(Embedded Open Type格式)：字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
.svg(SVG格式)：是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot?') format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }
但为了让各多的浏览器支持，你也可以写成：
@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 */ }
@font-face使用实例：
实例1
<style> @font-face{ font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div{font-family:myFirstFont;} </style>
实例2
<h2 class="neuesDemo">Neues Bauen Demo</h2>
通过@font-face来定义自己的Web Font:
@font-face { font-family: 'NeuesBauenDemo'; src: url('../fonts/neues_bauen_demo-webfont.eot'); src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/neues_bauen_demo-webfont.woff') format('woff'), url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'), url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg'); font-weight: normal; font-style: normal; }
这里采用的是相对路径，也可以使用绝路径，把定义好的字体应用到我们实际页面中去：
h2.neuesDemo { font-family: 'NeuesBauenDemo' }
实例3：字体图标引入
使用字体图标的优势如下：
1. 矢量化：字体是矢量格式，因此能够轻松的适配不同的设备，而不必为不同分辨率的屏幕准备不同的图片资源。
2. 轻量性：字体相对于一系列的图片资源要更加的轻量，一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。
3. 灵活性：由于图标字体，本质上是一种字体而非一种图标，因此我们可以设置各种字体属性，例如通过设置font-weight, font-size, font-color来改变图标的粗细、大小、颜色。
4. 兼容性：网页字体支持所有现代浏览器，甚至连IE4都可以支持。
关于图标字体已经介绍的差不多了，该来点干货了。下面将介绍利用CSS3的@font-face使用图标字体的具体方法。我们这里继续以IconMoon为例来展示图标字体。下面是图标字体的页面代码。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?carbqp'); src: url('fonts/icomoon.eot?carbqp#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?carbqp') format('truetype'), url('fonts/icomoon.woff?carbqp') format('woff'), url('fonts/icomoon.svg?carbqp#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-google-plus:before { content: "\ea85"; font-size: 60px; } .icon-youtube:before { content: "\ea97"; color: rgb(210,0,0); font-size: 60px; } .icon-facebook:before { content: "\ea8a"; color: rgb(59,88,155); font-size: 60px; } .icon-twitter:before { content: "\ea8e"; color: rgb(26,178,232); font-size: 60px; } </style> <div class="icon-google-plus" style="float:left"></div> <div class="icon-youtube" style="float:left;margin-left:50px;"></div> <div class="icon-facebook" style="float:left;margin-left:50px;"></div> <div class="icon-twitter" style="float:left;margin-left:50px;"></div> </body> </html>
效果如下：
