在CSS2.0时代，页面中如果使用了操作系统中没有的一些特殊字体，想要它们正常显示的方法只有将其做成图片，如果一个页面中有20个特殊字体，那就需要做20多个图片，做起页面来十分繁琐。
@font-face不像前面介绍的那些CSS仅仅是个属性，它是选择器，可以用许多字体相关属性对它进行描述。
@font-face {
font-family:'FontName'; /*自定义的字体命名*/
src: url('FontName.ttf') format('truetype'); /*字体的路径和位置，和背景图片的格式相同, format是字体格式，这是根据字体制作时就已经确定的*/
font-weight:bold;
font-style: normal;
}
.test{font-family:'FontName'}
怎么制作调用的特殊字体
看到喜欢的特殊字体我要怎样才能得到，那些.eot,.woff,.ttf,.svg这些字体格式又怎么获取呢？有些朋友可能就不知道如何运手了，那么我们就带着这些问题来一个全程完成的实例吧：
一、获取特殊字体：
我们拿下面这种single Malta字体来说吧：
要得到single Malta字体，不外乎两种途径，其一找到付费网站购买字体，其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的，那我们就得到免费的地方下载，在哪有呢？我平时都是到Google Web Fonts和Dafont.com寻找自己需要的字体，当然网上也还有别的下载字体的地方，这个Demo使用的是Dafont.com的Single Malta字体，这样就可以到这里下载Single Malta：
Single Malta下载下来后，需要把它解压缩出来：
二、获取@font-face所需字体格式：
特殊字体已经在你的电脑中了，现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，我们同样是需要第三方工具或者软件来实现，下面我给大家推荐一款我常用的一个工具fontsquirrel,别的先不多说，首跟我点这里进入到下面这个界面吧。
如果你进入页面没有看到上图，你可以直接点击导航:
如果你看到了上面的界面，那就好办了，我们来看如何应用这个工具生成@font-face需要的各种字体，先把我们刚才下载的字体上传上去：
上传后按下图所示操作：
现在从Font Squirrel下载下来的文件已经保存在你本地的电脑上了，接着只要对他进行解压缩，你就能看到文件列表如下所示：
大家可以看到，解压缩出来的文件格式，里面除了@font-face所需要的字体格式外，还带有一个DEMO文件，如果你不清楚的也可以参考下载下来的DEMO文件，我在这里不对DEMO说明问题，我主要是给大家介绍如何把下载下来的文件有价值的运用到我们的项目中。
例如在自己的本地创建了一个fontface项目：
为了让项目结构更清晰，我们在项目中单独创建一个fonts目录，用来放置解压缩出来@font-face所需的字体格式：
现在@font-face所需字体已经加载到本地项目，现在本地项目中的style.css中附上我们需要的@font-face样式
@font-face {
font-family: 'SingleMaltaRegular';
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;
}
到这里为止，我们已经通过@font-face自定义好所需的SingleMalta字体，离最后效果只差一步了，就是把自己定义的字体应用到你的Web中的DOM元素上：
h2.singleMalta {
font-family: 'SingleMaltaRegular'
}
效果：
看到上面的效果，那大家就知道我们实现成功了
那么关于@font-face帮你打造特殊效果的字体，到这里基本上就完成了，我在这里需要提醒使用者：
1、如果你的项目中是英文网站，而且项目中的Logo，Tags等应用到较多的这种特殊字体效果，我建议你不要使用图片效果，而使用@font-face，但是你是中文网站，我觉得还是使用图片比较合适，因为加载英文字体和图片没有多大区别，但是你加载中文字体，那就不一样了，因为中文字体太大了，这样会影响到项目的某些性能的优化；
2、致命的错误，你在@font-face中定义时，文件路径没有载对；
3、你只定义了@font-face，但并没有应用到你的项目中的DOM元素上；
以上几点都是在平时制作中常出现的问题，希望大家能小意一些，另外我们没有办法在购买所有字体，就算你实力雄厚，那也没有办法在一台服务器主机上放置你所有项目需要的字体。因此我给大家提供几个免费字体下载的网址：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你点这里将有更多的免费字体。前面几个链接是帮助你获取一些优美的怪异的特殊字体，但下面这个工具作用更是无穷的大，他能帮你生成@font-face所需要的各种字体，这工具就是Font Squirrel。
最后在提醒一下，使用@font-face别的可以忘了，但Font Squirrel千万不能忘，因为他能帮你生成@font-face所需的各种字体格式。
到此关于@font-face就介绍完了，不知道大家喜欢不喜欢，如果喜欢的话赶快动手实践一下，有Blog的可以马上运用上去，也可以炫一下。
转载来自：W3CPLUS