做网站前端工程的都知道，用户浏览网站时，网页上的字体是加载本地的。换言之，如果网站使用了用户电脑所没有安装的字体，那预期的效果就打折了。

上网搜罗了下，这个问题，其实还是有解决办法的。那就是，准备一个或几个字体文件，放置到服务器上，再用 CSS 的方法把字体加载到网页中，这样，即使用户电脑中没有某一种字体，也可以正常显示！

以微软雅黑为例，一般来说，VISTA 系统和现在的 win7 系统都自带了这种字体，但 winXP 却没有。如果网站中运用了雅黑字体，win7 系统的用户访问能够正常显示，但 winXP 系统的用户访问，就不能显示，应该是用默认的宋体代替了。

网上有许多这种加载字体文件的 CSS 方法，看这段代码：

body {font-family:'微软雅黑'}
@font-face {
font-family:微软雅黑;
url('微软雅黑.eot'); /* IE9 Compat Modes */
url('微软雅黑.eot?#iefix' ) format('embedded-opentype'), /* IE6-IE8 */
url('微软雅黑.woff') format('woff'), /* Modern Browsers */
url('微软雅黑.ttf') format('truetype'), /* Safari, Android, iOS */
url('微软雅黑.svg#微软雅黑') format('svg'); /* Legacy iOS */
}

我就用公司办公电脑做测试吧！系统是 winXP，我确定电脑中没有安装雅黑字体。

先 下载一个微软雅黑字体文件（注意：不要安装到系统中！），新建一个 HTML 文件，用上面的方法把字体加载进来，经过测试，到这一步， 在 Firefox、Chrome、傲游这三个浏览器中，是可以正常显示的！但在 IE 系列浏览器中无一例外都无效，都显示的宋体！这至少证明一个问 题：凡是以 IE 为内核的浏览器都不支持加载外部 .ttf 格式的字体！

回头看看上面的代码，我们会知道，除了需要一个 .ttf 格式的字体文件外，还需要 .eot、.woff、.svg 这三个格式的文件，而如何获得这些文件应该会是解决 IE 系列浏览器的关键！

上网搜索了下，基本上这个，没有发现有这几种格式直接下载的。有的都是介绍啥啥转换方法。

不 过有些文章中说得仔细些，告诉了一些如何生成 .eot 文件的方法。按照某一篇文章的方法，首先找到国外某个网站，地 址：http://www.fontsquirrel.com/fontface/generator。是个专门把 .ttf 转换为 .eot 的网 站，但选择上传后发现，由于字体文件太大，无法上传，第一个方法宣告失败；

第二个方法，下载使用了 Microsoft WEFT 这个东东，声称可以转换，英文版的，使用超级不方便，鼓捣了半天，其实践结果也证明，生成的 .eot 文件根本没有效果！后来一查方知，它对中文的转换效果非常不理想，果断放弃！

第 三个方法，根据一篇文章说明，下载了某个也声称可以转换的软件，名曰《字体转换工具》，其在命令行下运行，命令类似于这 样：ttf2eof.exe src_filename.ttf target_filename.eot，但结果证明是无效的！不知道是我操作方法不 对，还是有其他原因。

第四方法，也就是我最后成功的方法！不过也经过好几番折腾才完成！是个网站，地 址：http://ttf2eot.sebastiankippe.com/，在网站上直接选择上传文件，ttf 文件足有10多兆，上传了好长一段时 间，经过漫长的十几二十分钟后，转换倒是成功了，但弹出的迅雷下载却提示失败，源文件不存在！

转换成功了为什么会下载不了？难道不支持迅雷 下载不成？抱着这个想法，果断打开 Chrome 浏览器，重新上传、转换。。。最后，转换完成，Chrome 浏览器是直接下载，不使用其他下载工具， 不多时就下载完成！然后。。。怀着万分激动的心情，把下载好的 eot 文件拷到测试目录，再刷新 IE 测试页面，成功！

上面第四步，之前也遇到过某些下载网站是不支持迅雷工具的，还有种情况就是，安装了迅雷，IE 系列浏览器如果遇到下载的内容，一般会直接启用它，它原本的浏览器下载就变得无用了。

到现在为止，我机器上安装的十几款浏览器全部都测试通过！而这一切，仅仅是因为成功添加了一个 eot 文件！其他的如 .woff 和 .svg 格式就先不管它了，毕竟它们适用的浏览器，我们很少用到。

现在，虽然是成功解决了各主流浏览器加载外部字体的问题，但也只是成功了一小半，因为我们要清楚地看到问题的本质，即后续需要测试网站加载速度的问题，两个字体文件加起来快有 30M 了，加载速度的问题亟待测试与解决！

最后，写句总结：咱研究技术的，需要有坚韧不拔的折腾信念！不成功誓不停止折腾！

文章转自:http://hi.baidu.com/dysuo_com/item/15917bc990eb1a7789ad9ec5