网站引入中文字体导致网站加载速度变慢怎么办?

【导读】很多时候出于版权和美观考虑网站的字体需要做引入,以期达到在各类设备上访问效果一致。而当客户有字体需求的时候,网站访问速度往往会因此受到影响。如何解决引入字体导致网站访问变慢的问题

   很多时候出于版权和美观考虑网站的字体需要做引入,以期达到在各类设备上访问效果一致。而当客户有字体需求的时候,网站访问速度往往会因此受到影响。无锡网站开发公司马氪软件认为,作为技术偏执狂,损伤用户体验的行为不能容忍。


  那么,网站里引入字体导致网站内页面执行效率降低,访问变慢的问题如何解决?

网站引入中文字体导致网站加载速度变慢怎么办


  一、字体文件导致网站访问变慢的问题的原因


  中文WebFont的困境:


  中文字体体积大

  英文字体文字部分由26个字母组成,所以字体文件通常不会太大;而中文汉字数量总共约有九万左右, 国标(GB)字库 有6763字, 而根据《现代汉语常用字表》统计数据,常用汉字也要有3500个左右。 中文字体文件通常都会几M的大小,参照现在中国的网络环境,显然不适合在项目中使用。


  浏览器支持

  不同浏览器对字体的支持也是不同的,没有一种可以支持所有浏览器的字体,这就要求我们针对不同的浏览器制作不同的字体。(N=Not supported, P=Partial support, Y=Supported)


  table


  针对以上的问题,我们可以得出中文WebFont要解决的问题是:压缩和转码。


  Font-Spider中文WebFont解决方案的诞生:


  为了不让工程与体验制约着设计师对字体选择以及创意的实现,我们利用业余时间解决了中文WebFont的两大问题即压缩和转码,于是便有了 Font-Spider (字蛛)的诞生。作为业界首款中文 WebFont 本地自动化压缩与转码工具,中文字体 web 化问题迎刃而解。它是一个 web 字体工具,通过自动化技术来压缩、转码跨平台的中文字体,让网页自由嵌入中文字体成为可能。


  二、如何解决引入字体导致网站访问变慢的问题


  1、使用在线工具


  这里我们推荐使用Every font在线中文字体压缩


  只需要上传html网页和字体的zip压缩包,工具便会将ttf中的字体精减,只剩下html页面中包含的字体。这样一个网页下来,字体文件就几K,一张图片也要好几十K呢,还是非常合适的。


  上传的zip文件必须包括ttf格式的字体,而其他的字体以下面的例子写在html中,everyfont在线工具可以直接生成其他几种格式的文件。


  body{

  font-family: 'FZLTXHJW';

  src: url('./FZLTXHJW.ttf') format('truetype'), url('./FZLTXHJW.svg') format('svg'),url('./FZLTXHJW.woff') format('woff');/*注意路径一定要正确*/

  font-weight: normal;

  font-style: normal;

  }


  这样原则上我们的网页就可以使用任意的字体了,不用担心中文字体过大影响加载了,不过,如果后期修改文案,尽量要是网页中出现过的字,如果修改的文字有新的字 ,则还需要在用原来完整的ttf字体文件,重新上传一遍。


  2、折中的“笨”方法


  当我们使用字蛛、或在线解压工具没有达到理想效果的情况下怎么办?就此妥协?不,咱们还有更为有效的方法。


  (思路)网站里既然要引入字体,当然这个中文字体可能比较大一般10M到30M不等,那么我们是不是可以这么考虑,字体文件可以编辑或者修改或者删除吗?


  那如果您网站内使用的字体都是一些较为常规的,哪怕后期更新也就只是那些个字体,那么我们完全可以通过字体编辑修改系统或软件Fonteditor,把常规的字体保留下来,不需要的直接删除,这样是“笨鸟先飞”的做法,你会发现一下子字体文件能从20M变成20K,极大提高网站访问速度!


  三、补充知识点


  【外部字体的引用方法】


  @font-face{

  font-family: "自己的字体名字,可以随便起,可以不和字体文件名相同";

  src: url('下载的字体路径');

  }


  注意这样只是把字体定义好了,并没有应用到任何的元素上。只要在任何的html元素上指定font-family:"自己定义的字体名" 即可。


  经测试,应用自定义字体时,font-family的值只能写自定义的字体名,不能加其他任何的多于字体或者多于字符,否则无法应用自定义字体!


  【常用的一些在线外部字体】

  1、谷歌字体

  谷歌全面退出中国,谷歌官网域名google.com、谷歌香港google.com.hk都打不开, ping了一下google.com和google.com.hk两个域名的服务器情况,最后ping出来的IP地址均显示为“美国”,也就是说谷歌香港(google.com.hk)的服务器,已由香港转移至美国,所以链接时间会很长,甚至断断续续出现请求超时的情况。

  这样就是说谷大神在中国再也神不起来了。欲哭无泪的是我们苦逼的IT啊,谷歌字库不能用了,经网上一番找寻终于在wangzhan.360.cn上给解决了,虽然对360没有什么好感,但其提供的这一套服务还是相当不错的!

  谷歌字体源--英文字体

  可以在https://fonts.google.com/网站上下选择字体,然后把提供的代码,引入网页中。

  在网页中正常定义即可,如:font-family: 'Roboto', sans-serif;

  还可以把字体文件下载下来,放在服务器上引用。

  不过,这些字体不包括中文。纯英文的网站可以考虑使用。中文则不会按照设定的字体显示。

  2、360字体

  注:360字体库最近挂掉了,其实早在15年初google就在北京设置了服务器,ping fonts.googleapis.com 也可以发现,ip为203.208.40.136,地址是北京电信海淀区,比360镜像要快很多,所以直接用fonts.googleapis.com即可,不必用fonts.useso.com。

  <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

  (family就等字体名称,空格用+号代替)在页面调用

  @import url(http://fonts.googleapis.com/css?family=Ubuntu);

  (family就等字体名称,空格用+号代替)在样式文件里面调用,如font-family为 Wire One 则 http://fonts.useso.com/css?family=Wire+One

  页面JS调用方法(families就等字体名称,空格用+号代替)

  web字体库的样式调用方法:

  样式里面用法:font-family: 'Poiret One', sans-serif;(字体名称)


  总之,客户有需求,那么我们还可以通过各类方法综合去考虑,以得到绝佳的解决方案,让网站尽量处于较为灵活和运行效率高的状态下。


  马氪软件开发遇到的很多问题其实都是实际开发过程中碰到的,这边把解决方案记录下来,也分享给广大开发者使用。如果有任何问题,无锡网站开发公司马氪软件,也欢迎大家的咨询。


本文链接:http://mkapps.cn/news/ask/262.html

如无特别说明©本站内容均为原创,转载请标注来源:无锡做网站公司http://mkapps.cn


    匿名评论
  • 评论
人参与,条评论
 您阅读这篇文章共花了: 

分享这篇文章吧!

相关文章