css网络字体@font-face

@font-face

首先 
获取要使用字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体。 

.TTF或.OTF，适用于Firefox 3.5、Safari、Opera 

.EOT，适用于Internet Explorer 4.0+ 

.SVG，适用于Chrome、AndRoid、IPhone

.woff，适用于Chrome 6，Firefox3，ie9+，opare11。

woff是最新的web开放字体格式(web open font format)，w3c推荐，主要优势是针对浏览器进行优化，字体文件小。

下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的是.TTF 文件，我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel或 onlinefontconverter提供的在线字体转换服务获取。这里推荐第一个站点，它允许我们选择需要的字符生成字体文件（在服务的最后一个选项），这样就大大缩减了字体文件的大小，使得本方案更具实用性。

然后
获取到三种格式的字体文件后，下一步要在样式表中声明该字体，并在需要的地方使用该字体。 
字体声明如下：

@font-face {
    font-family: 'emotion';
    src: url('emotion.eot'); /* IE9*/
    src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('emotion.woff') format('woff'), /* chrome、firefox */
         url('emotion.ttf')  format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('emotion.svg#svgFontName') format('svg'); /*  iOS 4.1- */
    }

例如：

@font-face {  
    font-family: 'fontNameRegular';  
    src: url('华康少女文字.eot');  
    src: local('华康少女文字 Regular'),  
    local('华康少女文字'),  
    url('华康少女文字.woff') format('woff'),  
    url('华康少女文字.ttf') format('truetype'),  
    url('华康少女文字.svg#华康少女文字') format('svg');  
}  

body{
	background-color:#D2CDBE;
	font-family: "华康少女文字","宋体",sans-serif;
}