乐趣区

关于css:CSS引用外部字体二优化

jiezi

在页面上引入字体后，会带来一个性能的问题。

通常字体文件都比拟大，差不多都是 2、3M，有时候 4、5M 也是有的，因为里边有成千盈百的汉字嘛。可问题是，我的页面上很可能就只须要显示那么十七、八个字，为了这几个字，我得下载个 4、5M 的字体，有点儿划不来啊。

这个问题怎么解决呢？

咱们这样思考一下：能不能从现有的字体里把须要显示的字抽取进去呢？页面上要显示十七个字，我就抽十七个，须要显示二十三个字，我就抽二十三个字，而后把抽取进去的字，从新生成字体文件，这样新的字体文件就会大大缩减，同时也能满足页面显示的需要。

font-spider（字蛛）就能实现上述的工作。上面介绍一下它的应用办法。

  1. 装置 font-spider 依赖。

    npm install font-spider -g

    装置实现后，可通过 font-spider -V 查看是否装置胜利。

  2. 新建一个目录，目录下蕴含一个 css 文件，一个 html 页面和一个 font 文件夹，font 文件夹里蕴含咱们的原始字库（这里应用了可口可乐在乎体），如图所示：

main.css的内容如下：

@font-face {
  font-family: 'co';
  src:
      url('./fonts/coca.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.medium {font-family:'co';}

index.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>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="medium">
      处分查问管理系统登录
  </div>
</body>
</html>

这里 html 的写法只会把“处分查问管理系统登录”这十个字压缩成 coca 字体，也就是说新生成的字体里只蕴含这十个字。

  1. 在命令行执行font-spider index.html，生成新字体，如图所示：

能够看到，原始字库是 4248.74KB，新的字库是 9.24KB。

目录构造也有所扭转，如图所示：

—完—

退出移动版