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

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

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

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

　　中文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。

　　

　　(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;（字体名称）

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

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

声明：除非注明，本站内容由无锡网站建设马氪软件原创发布©，转载请联系我们授权合作。