创造新鲜的交互式设计，橙Desingn提供您独特的网站

      如何让客户端在浏览网站时，我们所预设的字体不被替换？我相信这是很多做网站的朋友都想解决的问题，当我们遇到这样的问题时，很多朋友会和我一样，把我们需要的字体做成图片放在网站上。这样在客户端浏览的时候字体就不会被替换。
      @font-face是CSS3中的一个模块，他主要是把自定义的Web字体嵌入到你的网页中，使网站不会因为客户端没有预设字体而变形。如果你的网站很注重视觉效果，决对不可以少了@font-face标签。
认识@font-face标签
@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】
语法：
@font-face ：{属性: 取值;}
取值：
font-family：设置文本的字体名称。
font-style：设置文本样式。
font-variant：设置文本是否大小写。
font-weight：设置文本的粗细。
font-stretch：设置文本是否横向的拉伸变形。
font-size：设置文本字体大小。
src：设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。
兼容性：
.eot格式

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(√)IE6	(×)Firefox 2.0	(×)Chrome 1.0.x	(×)Opera 9.63	(×)Safari 3.1
	(√)IE7	(×)Firefox 3.0	(×)Chrome 2.0.x		(×)Safari 4
	(√)IE8

.ttf格式

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(×)Firefox 2.0	(×)Chrome 1.0.x	(×)Opera 9.63	(√)Safari 3.2.1
	(×)IE7	(×)Firefox 3.0	(×)Chrome 2.0.x	(√)Opera 10	(√)Safari 4
	(×)IE8	(√)Firefox 3.5

更多详细介绍请参考：
@font-face 在线手册：http://www.php100.com/manual/css3_0/@font-face.shtml#example
示例（转自百度贴吧）：
基本html结构和图例（我的浏览器默认显示是雅黑的）



现在，我想要这样一个字体效果


但这个字体效果很少存在于一般的电脑上，要显示怎么办呢如下图注意蓝色背景部分的代码

最终效果


由于很多中文字体加载起来有些难度，这里分享二个转换格式的网站：
http://www.kirsle.net/wizards/ttf2eot.cgi 在线转ttf为eot格式；
http://www.fontsquirrel.com/fontface/generator强大的在线转ttf为eot、woff等字体格式