font-compression-plugin 字体压缩插件
✍️
简介基于font-spider的一款字体压缩插件,通过此插件可实现vue项目打包时对特殊字体的自动化压缩 该插件将会在你规定的文件路径下(默认为“src/assets/font/”)生成一个font.html和font.css模板,以及压缩的字体文件,将生成的font.css文件在全局引入便能轻松使用压缩字体
- 为了便于调试,测试环境并不会对字体进行压缩(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
// 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' // 配置项
}))
}
}
// App.vue
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App',
components: {
// ...
},
data() {
return {
// ...
}
}
}
</script>
<style>
@import './assets/font/font.css';
</style>
// demo.vue
<template>
<div>
<div class="demo">我是普通字体(我是特殊字体)</div>
</div>
</template>
<script>
export default {
components: {
// ...
},
data() {
return {
// ...
}
}
}
</script>
<style>
.demo {
font-family: 'pmzd';
}
</style>