历史搜索

提升网页加载速度之字体包体积优化

游客2024-08-25 07:53:01
目录文章目录
  1. 一、font-spider 介绍
  2. 二、安装 font-spider
  3. 三、如何使用
  4. 注意事项

提升网页加载速度之字体包体积优化 1

当我们的页面加载过多的字体文件时,由于字体包的体积过大,会产生页面加载过慢的问题,所以对字体包体积优化势在必行,从而提升我们网页的加载速度,提升用户体验。

一、font-spider 介绍

font-spider(字蛛)是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。以减小字体包的体积。

1. 官网(可能需要翻墙):点击这里

2. github 地址:点击这里

3. font-spider特性:

  1. 压缩字体:智能删除没有被使用的字形数据,大幅度减少字体体积;
  2. 生成字体:支持 woff2、woff、eot、svg 字体格式生成。

二、安装 font-spider

因为font-spider不是频繁用到的工具,所以使用局部安装。

1. 新建文件夹spider

2. 初始化package.json

npm init -y

3. 安装:

npm install font-spider

三、如何使用

1. 在spider目录下新建index.html,内容如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>font-spider</title>
    <style>
      @font-face {
        font-family: 'source'; /* 名字自己定义就好 */ 
        /* ttf 字体必须存在,否则会报错 */
        src: url('./font/source.ttf') format('truetype');  
        font-weight: normal;
        font-style: normal;
      }
    
      /* 若使用以下配置,支持生成其他格式的字体 */
      @font-face {
        font-family: 'source';
        src: url('./font/source.eot');
        src:
          url('./font/source.eot?#font-spider') format('embedded-opentype'),
          url('./font/source.woff2') format('woff2'),
          url('./font/source.woff') format('woff'),
          /* ttf 字体必须存在,否则会报错 */
          url('./font/source.ttf') format('truetype'),
          url('./font/source.svg') format('svg');
        font-weight: normal;
        font-style: normal;
      }
      
     /* @font-face 可以支持多个 */
    </style>
  </head>
  <body>
    <!-- font-family 与上的对应,如果不写这个文案,应该是默认常用字体 -->
    <div style="font-family: source">
        <!-- 这里面写入需要用到字体的文案 -->
    </div>
  </body>
</html>

2. 将对应的字体放到对应的文件夹下。

3. 执行以下代码:

// 语法
npx font-spider [options] 

// 使用
npx font-spider index.html

执行成功后,font 文件夹中会出现一个.font-spider文件夹,里面的是未压缩的文件,font目录下的字体会被相应的替换,为被压缩后的字体,并且会生成多种格式的字体。

注意事项

  1. 不支持 javascript 动态插入的元素与样式 .(只能是初始化时,就存在于页面中的文本,并且不能通过 js 进行移除和添加);
  2. otf 字体需要转换成 .ttf 格式才能被压缩;
  3. 仅支持 utf-8 编码的 HTML 与 CSS 文件;
  4. CSS content 仅支持 content: 'prefix'content:attr(value) 这两种形式;
  5. 执行命令只能对 html 文件有效。