通过css加载外部自定义文字

很多时候，我们希望自己的页面上出现比较个性的字体，但是这种字体并不是系统上默认自带的，以前的做法是通过加载图片来达到效果，但是这一做法的缺点是，不灵活，不利于后期更改维护。且如果特殊字体过多的话，便会造成加载速度过慢的现象。解决这一问题的办法是，通过CSS来加载外部字体。一下是我的代码，如果有不同或者更好的建议，期待着和你的交流探讨。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>fontDemo</title>
  <meta name="author" content="Administrator" />
  <!-- Date: 2014-07-24 -->
  <style type="text/css">
   body {background:#dff5b7; }
  @font-face{
   font-family:'login';/*文字的名字*/
   src:url('font/bb2780.eot');/*文字文件所在的位置*/
   src:local('login Regular'),
   local('login'),
   url('font/bb2780.woff')format('woff'),
   url('font/bb2780.ttf')format('truetype'),
   url('font/bb2780.svg')format('svg'),
   url('font/bb2780.otf')format('otf');
   }
  h1{font-family: login;font-size: 50px;text-align:center;}
  </style>
 </head>
 <body>
  <h1>I love you</h1>
 </body>
</html>

其中：

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

.EOT，适用于Internet Explorer4.0+

.SVG，适用于Chrome、IPhone

.WOFF 知用于Chrome、Firefox

效果如图：

文字包格式转换在线工具：http://everythingfonts.com

我的代码文件下载地址:http://download.csdn.net/detail/u014703834/7673657