css3之@font-face用字体代替图片效果

1. 首先，我们要得到这种特殊的字体，可以从网站上进行下载，可以到Google Web Fonts和Dafont.com寻找自己需要的字体，当然网上也还有别的下载字体的地方。

   下载下来后，需要把它解压缩出来：

   里面会有一个后缀名为.ttf的文件。

2. 当然除了ttf字体，@font-face还要所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，我们同样是需要第三 方工具或者软件来实现，常用的一个工具fontsquirrel。参考资料里面有相关链接。先上传ttf字体，然后download下来我们需要的字体格 式。

3. 通过第2步，我们会得到后缀名为.svg， .woff， .eot等相关文件。我们在项目中新建一件名为fonts的文件夹，将这些字体文件放在fonts文件夹下。

4. 现在@font-face所需字体已经加载到本地项目，现在本地项目中的style.css中附上我们需要的@font-face样式

   @font-face {

   font-family: 'YourWebFontName';

   src: url('../fonts/singlemalta-webfont.eot');

   src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),  

   url('../fonts/singlemalta-webfont.woff') format('woff'),

   url('../fonts/singlemalta-webfont.ttf') format('truetype'),   url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');   font-weight: normal;

   font-style: normal;

   }

5. 到这里为止，我们已经通过@font-face自定义好所需的SingleMalta字体，离最后效果只差一步了，就是把自己定义的字体应用到你的Web中的DOM元素上：

   h2.singleMalta { font-family: 'YourWebFontName' }

    

    

   字体转换：http://www.yunsd.net/apply/fontsquirrel-eototfsvgwotf.html

   http://www.fontsquirrel.com/