零星网络

技术&资讯
网站超市

需要前后台演示请留言,或QQ:150623477联系站长。

本成品是基于ASP+Access开发的网站内容管理系统,提供了简介类模块,新闻类模块,产品类模块,图片类模块,下载类模块
· 适用性:充分考虑公司企业的实际需要,确保功能上较强的实用性。
· 易用性:用户界面简洁、美观、友好,易于用户操作和使用,操作人员只需简单学习即可掌握。
· 安全性:安全可靠的权限划分,既考虑信息的共享,又注意信息的保护与隔离。

DIV+CSS 您的当前位置:首页 > 技术&资讯 > DIV+CSS

CSS 加载外部字体文件

发布时间:2015-07-05  浏览次数:  分享到:

CSS 远程加载字体的方法

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

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

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

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

body {font-family:'微软雅黑'}
@font-face {
font-family:微软雅黑;
src: url('微软雅黑.eot'); /* IE9 Compat Modes */
src: 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 */
}

http://www.fontsquirrel.com/fontface/generator提供的在线字体转换服务获取字体文件格式的转换。

我就用公司办公电脑做测试吧!系统是 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 了,加载速度的问题亟待测试与解决!

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

相关评论

    评论加载中...
    评论者:     验证码:
        

首页|网站超市|业界|营销|优化|HTML|JS|JQUERY|DIV+CSS|编程|运营|设计排版|创业|访谈

Copyright © 2006-2015 Power by 零星设计. 联系QQ:150623477
合作共赢、快速高效、优质的网站建设提供商

  • ●在线咨询点击这里给我发消息
  • ●在线咨询点击这里给我发消息
  • ●在线咨询点击这里给我发消息
  • 业务电话正在通话中…
  • 09:00AM-22:00PM
  • 高效优质的网站建设提供商
  • 加入收藏