操作方法
首先，我们要得到这种特殊的字体，可以从网站上进行下载，可以到Google Web Fonts和Dafont.com寻找自己需要的字体，当然网上也还有别的下载字体的地方。 下载下来后，需要把它解压缩出来： 里面会有一个后缀名为.ttf的文件。
当然除了ttf字体，@font-face还要所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，我们同样是需要第三方工具或者软件来实现，常用的一个工具fontsquirrel。参考资料里面有相关链接。先上传ttf字体，然后download下来我们需要的字体格式。
通过第2步，我们会得到后缀名为.svg， .woff， .eot等相关文件。我们在项目中新建一件名为fonts的文件夹，将这些字体文件放在fonts文件夹下。
现在@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; }
到这里为止，我们已经通过@font-face自定义好所需的SingleMalta字体，离最后效果只差一步了，就是把自己定义的字体应用到你的Web中的DOM元素上： h2.singleMalta { font-family: 'YourWebFontName' }