font-compression-plugin 字体压缩插件

简介✍️

基于font-spider的一款字体压缩插件，通过此插件可实现vue项目打包时对特殊字体的自动化压缩 该插件将会在你规定的文件路径下（默认为“src/assets/font/”）生成一个font.html和font.css模板，以及压缩的字体文件，将生成的font.css文件在全局引入便能轻松使用压缩字体

💡tips：

• 为了便于调试，测试环境并不会对字体进行压缩（isProEnv字段默认为false）
• 提供的字体源文件必须有.ttf格式的字体文件，否则无法进行压缩！！

🌲生成文件目录结构 可生成字体类型

• ttf
• woff
• woff2

├── font.css
├── font.html
├── pmzd.ttf
├── pmzd.woff
└── pmzd.woff2

安装🔧

npm i @tripmini/font-compression-plugin -D

参数与默认值🐛

new FontCompressionPlugin({
  // 特殊字体列表 必传🌟
  // 每个对象代表一种特殊字体，包含特殊字体引用的字体名称，字体选择器，字体文件引用路径，使用到该特殊的字体的文本（文本量大时可以使用引入外部文件的方式）
  fontList: [
    {
      // 字体名
      fontName: 'pmzd',
      // 字体选择器
      className: 'pmzd', 
      // 字体文件引用路径
      // 注意⚠️：此处不需要带字体文件后缀名,且字体原始文件必须为.ttf
      fontDir: '../static/pmzd',
      // 特殊字体文本
      content: '我是特殊字体'
    }
  ],
  // 生成提供给font-spider解压的html文件名 非必传
  // default: 'font.html'
  htmlfile: 'font.html',
  // 规定生成的字体相关文件所在的文件目录，⚠️注意事先创建好文件夹 非必传
  // default: 'src/assets/font/
  baseUrl: 'src/assets/font/',
  // 是否为生产环境？ 非必传
  // default: false
  isProEnv: false
});

使用说明📖

🌰 举个栗子

👉 安装插件 执行命令

npm i @tripmini/font-compression-plugin --save

👉 配置插件 在项目中导入你的特殊字体文件，注意字体文件必须带有.ttf格式⚠️⚠️⚠️！！！

// vue.config.js
const FontCompressionPlugin = require('@tripmini/font-compression-plugin')

module.exports = {
  configureWebpack: config => {
    config.plugins.push(new FontCompressionPlugin({
      fontList: [
        {
          fontName: 'pmzd',
          className: 'pmzd', 
          fontDir: 'public/pmzd', // 注意⚠️：此处不需要带字体文件后缀名，此路径为字体在项目中的存放路径，请根据项目具体情况确保路径填写正确
          content: '我是特殊字体'
        }
      ],
      htmlfile: 'font.html',
      baseUrl: 'src/assets/font/',
      isProEnv: process.env.NODE_ENV === 'production' // 配置项
    }))
  }
}

👉 全局引入font.css文件 css文件所在路径即是你配置的baseUrl，如你配置的baseUrl为'src/assets/font/',那么你的css文件路径即是'src/assets/font/font.css',具体例子如下所示：

// App.vue

<template>
  <div id="app">
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
    // ...
  },
  data() {
    return {
      // ...
    }
  }
}
</script>
<style>
@import './assets/font/font.css';
</style>

👉 使用特殊字体 在需要使用特殊字体的css中使用该字体，font-family对应的字体名为你在fontlist传入的对应字体名

// demo.vue

<template>
  <div>
  <div class="demo">我是普通字体(我是特殊字体)</div>
  </div>
</template>
<script>
export default {
  components: {
    // ...
  },
  data() {
    return {
      // ...
    }
  }
}
</script>
<style>
.demo {
  font-family: 'pmzd';
}
</style>