@font-face功能
制作网站难免有些字体不是默认的，通过@font-face可以加载自己特定的字体，来实现特定的文字效果。
@font-face语句是css中的一个功能模块，用于实现网页字体多样性(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，@font-face 不能说他是什么新东西了，在 CSS2.0 规范中就有了这玩意儿，IE4.0 开始就已经出现，只是当时用的不是特别广泛，后来在 CSS2.1 草案中又被删掉。随着 web 的急速发展，@font-face 价值越来越凸显，然后再次被纳入 CSS3 草案中。@font-face规则 是为了解决由于浏览者系统中没有安装字体导致不能显示的问题。
@font-face用途
1.字体文件名简写
@font-face { font-family: 'YT'; /*声明一个名为yt的字体变量*/ src: url('YourWebFontName.eot')，local('YourFontName.eot'); }
然后在任何需要使用YT字体的地方就可以直接使用以下：
h1{font-family:YT;}
提示：
a.src属性定义字体的下载地址，local表示本机地址，url表示网址（比如使用服务器上下载的字体）
b.如果在src上定义了多种字体，他们也是候选关系，如上段代码
c.如果修改了src中定义的字体或者顺序，一定要关闭浏览器再打开才能看到修改后的效果，刷新是看不到的。
d.在@font-face规则中。font-family的作用是声明字体变量，与普通选择器中的font-family是不一样的。
2.使用服务端字体
在@font-face规则中，如果src属性定义的字体是一个url路径，则网页加载时会自动从服务器下载字体文件，再显示出来。
@font-face { font-family: 'FZCYS'; src: local('FZYaSongA-B-GB'); src: url('YourWebFontName.eot'); }
@font-face浏览器兼容
由于每种浏览器对@font-face的兼容性不同，不同的浏览器对字体的支持格式不同，这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。.TTF或.OTF，适用于Firefox 3.5、Safari、Opera；.EOT，适用于Internet Explorer 4.0+；.SVG，适用于Chrome、IPhone， 获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。
使用CSS3的@font-face属性可以实现在网页中嵌入任意字体，但是IE只支持微软自有的EOT格式字体，而其他浏览器都不支持这一字体格式，其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体
下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的是.TTF 文件，我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel（http://www.fontsquirrel.com/tools/webfont-generator）或 onlinefontconverter提供的在线字体转换服务获取。获取到三种格式的字体文件后，下一步要在样式表中声明该字体，并在需要的地方使用该字体。
@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 */ }
