提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

html字体文件过大导致加载缓慢如何解决？

文件HTML 如何 解决 加载 导致 字体 缓慢
2023-09-11 14:21:18 时间

在网页设计中，美工通常要求前端使用自己的定义的字体，比如苹果的字体PingFangMedium.ttf， 而实际上除了英文和数字好看外，中文并不好看，特别是windows下，中文发虚。但是字体文件却特别大，因此考虑通过压缩字体， 将汉字这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式，从而在不影响网页效果的前提下，加快网页响应速度。

压缩前字体文件PingFangMedium.ttf高达10.5M

 

字体压缩的原理就是你要使用的字符单独拿出来，不用的就不包含，其中font-spidder.html就包含了使用的字体文件，这样就可以使得字体文件更小。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   @font-face {
      font-family: op-design;
      src: url('PingFangMedium.ttf') format('truetype');
    }

    .text {
      font-family: op-design;
      font-size: 40rpx;
    }
  </style>
</head>
<body>
  
  <div class="text">
    <span>0123456789.+/</span>
    <span>abcdefghijklmnopqrstuvwxy</span>
	<span>ABCDEFGHIJKLMNOPQRSTUVWXY</span>
  </div>

</body>
</html>

使用方法如下：

1.先安装运行Node.JS


2.安装字蛛插件font-spider，命令为：

cnpm install font-spider -g

3.创建一个包括有特殊字体文件的HTML页面，文字格式为：ttf

4.字体压缩

压缩test.html中的字体

 也可以使用 font-spider ./*.html，意思是压缩当前文件夹下所有html所引用的字体

5.查看压缩结果

由图可见已经把原来15M多的字体压缩为6.8K大小的字体文件了。并且在原始目录生成了.font-spider目录，目录里面保存了，未压缩字体文件。

 

字蛛官网地址：http://font-spider.org/#use
 

相关文章