网页中添加自定义字体文件

通常系统自带的字体无法满足我们的需求，除了使用图片外，我们还可以加载一些自己喜欢的字体文件，尽管对访问速度稍有影响但主要需求可以满足了

首先还是谈谈兼容性的问题，由于各个浏览器的兼容性不同，大部分浏览器都兼容css3，可以使用ttf格式的字体文件，但是ie这个老大难就不行了。

载好了我们想要的字体文件，一般是ttf格式，需要转换一份eot格式的用于ie

http://www.kirsle.net/wizards/ttf2eot.cgi

可以到这个网站进行在线转换，然后下载。

当然这个站里面也有一些字体的用法介绍，这边用法就不赘述了，直接贴下代码

<style type="text/css">
<!--
@font-face {
font-family: 'userfont';
src=\'#\'" /span>
src=\'#\'" /span>
     url('BleedingCowboys.ttf') format('truetype');
}
.font-styles {
border:5px solid #999999;padding:15px; margin:20px;
background:#000; color:#fff; letter-spacing:15px;line-height:35px;
font-family:userfont;
}
-->
</style>
<div class="font-styles">
abcdefghijklmnopqrstuvwxyz<br/>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br/>
~!@#$%&*()-_=+,.?<>;:"'\/|
</div>

由于部分字体文件不完善，可能某些符号无法正常显示，这个要注意进行特别处理咯

效果如下

 

测试环境，ie 8 ， firefox 9.0 中文版。 大部分浏览器兼容ttf格式，如有例外 按需处理