通常系统自带的字体无法满足我们的需求，除了使用图片外，我们还可以加载一些自己喜欢的字体文件，尽管对访问速度稍有影响但主要需求可以满足了

首先还是谈谈兼容性的问题，由于各个浏览器的兼容性不同，大部分浏览器都兼容css3，可以使用ttf格式的字体文件，但是ie这个老大难就不行了。

载好了我们想要的字体文件，一般是ttf格式，需要转换一份eot格式的用于ie

http://www.kirsle.net/wizards/ttf2eot.cgi

可以到这个网站进行在线转换，然后下载。

当然这个站里面也有一些字体的用法介绍，这边用法就不赘述了，直接贴下代码

  1. <style type="text/css"> 
  2. <!-- 
  3. @font-face { 
  4. font-family: 'userfont'; 
  5. src: url('BleedingCowboys.eot'); 
  6. src: local('BleedingCowboys'),  
  7.      url('BleedingCowboys.ttf') format('truetype'); 
  8. }  
  9. .font-styles {   
  10. border:5px solid #999999;padding:15px; margin:20px; 
  11. background:#000; color:#fff; letter-spacing:15px;line-height:35px; 
  12. font-family:userfont; 
  13. } 
  14. --> 
  15. </style> 
  16. <div class="font-styles"> 
  17. abcdefghijklmnopqrstuvwxyz<br/> 
  18. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br/> 
  19. ~!@#$%&*()-_=+,.?<>;:"'\/| 
  20. </div> 

由于部分字体文件不完善，可能某些符号无法正常显示，这个要注意进行特别处理咯

效果如下

网页中添加自定义字体文件_休闲

 

测试环境，ie 8 ， firefox 9.0 中文版。 大部分浏览器兼容ttf格式，如有例外 按需处理