HTML5网页设计

html_css

CSS加载外部字体文件的方法

时间:2012-10-01 21:09来自:网络作者:未知点击:
CSS 远程加载字体的方法 做网站前端工程的都知道,用户浏览网站时,网页上的字体是加载本地的。换言之,如果网站使用了用户电脑所没有安装的字体,那预期的效果就打折了。

CSS 远程加载字体的方法

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

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

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

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

  1. body {font-family:'微软雅黑'
  2. @font-face { 
  3. font-family:微软雅黑; 
  4. srcurl('微软雅黑.eot'); /* IE9 Compat Modes */ 
  5. srcurl('微软雅黑.eot?#iefix'format('embedded-opentype'), /* IE6-IE8 */ 
  6.   url('微软雅黑.woff'format('woff'), /* Modern Browsers */ 
  7.   url('微软雅黑.ttf')  format('truetype'), /* Safari, Android, iOS */ 
  8.   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://www.shejicool.com/web/html_css/354.html

阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐