css引入特殊字体

css引入特殊字体建议只是用英文字体，中文字体太大不适合。

在CSS中通过@font-face属性来实现网页中嵌入特殊字体。

首先获取要使用字体的三种文件格式.EOT、.TTF或.OTF、.SVG，确保能在主流浏览器中都能正常显示该字体。

.EOT，适用于Internet Explorer 4.0+
.TTF或.OTF，适用于Firefox 3.5、Safari、Opera
.SVG，适用于Chrome、IPhone
最常见的是.TTF文件，我们需要通过这种文件格式转换为其余两种文件格式。

http://www.fontsquirrel.com/fontface/generator提供的在线字体转换服务获取字体文件格式的转换。

在css中进行如下声明：

@font-face {
 font-family: 'fontNameRegular';
 src: url('fontName.eot');
 src: local('fontName Regular'),
        local('fontName'),
        url('fontName.woff') format('woff'),
        url('fontName.ttf') format('truetype'),
        url('fontName.svg#fontName') format('svg');
}  
/*其中fontName替换为你的字体名称*/

在css中使用这个字体

h1{font-family: fontNameRegular}

转自：http://www.51xuediannao.com/qd63/index.php/page-3-77-1.html

下面我说一下如何实现的：
1.准备好你的字体，建议最好是.ttf，因为.ttf可以被高版本的chrome和ff3.0+直接调用，（暂时没有找到资料说可以在css直接调用.fon）。
 
2.准备转换.ttf到.eot的软件，我暂时找到两种：Microsoft Weft和ttf2eot（一个命令行程序）。据我的使用经验，Microsoft Weft是图形化软件，但如果转换压缩中文字库会失败（其实不是报错，只是转不了），所以如果要转换中文字体的就要用ttf2eot了。ttf2eot的使用方法非常简单：将字体文件和本程序放在同一目录，然后在cmd运行TTF2EOT <***.ttf> ***.eot就可以了。
 
3.把这两个文件都复制到你的项目文件夹中，在css文件中输入如下代码，就可以在目前所有主流上显示你的字体了：
 
@font-face{font-family:'yahei';src:url(../images/msyh.ttf); font-style:normal; font-weight:normal}
@font-face{font-family:'yahei';src:url(../images/msyh.eot);}
*{margin:0;font-family:'yahei';}
 
代码解释：font-family：字体的名称，src：路径，font-style和font-weight可以不写，这根据你的需要；第一行是针对ff、chrome、opera、Safari浏览器的，第二行就是针对ie的。经我测试，如果第一行和第二行在同一个css文件下，ff会失效，所以应该新建一个css文件，把第二行写入，然后用<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->导入，就可以解决这个问题。
 
就这样，任务完成！
 
不过，Every coin has two sides，我总结了一下css嵌入任意字体的优缺点：
 
优点：对于英文网站来说，这是个很好的方法，因为英语只有26个字母，所以字库文件再大也是有限的，所以如果你的项目是英文网站，或者做个英文的logo或者导航的话，这是个很好的方法，因为没有了图片，可以大大增加你的浏览速度。
 
缺点，如果是做中文网站的话，就不建议了，因为中文字库很大，10m-20m+很正常(不过也有小的)，这对于用户体验非常不利；当然你也可以弄一个制作ttf文件的软件(Font Creator Program)回来，这样就可以修改字体库的大小。不过，如果只是涉及到少量中文字体的话，这也是个不错的方法之一，毕竟没有了图片

转自：http://blog.163.com/ruanzhijun_love/blog/static/163696312201092502432189/