可以考虑基于 fontmin 将字体文件的字体子集化引入
FuzzyFade opened this issue · 4 comments
FuzzyFade commented
https://github.com/ecomfe/fontmin
可以通过解析的 Map.tsx 文件的 text,然后调用 fontmin 生成字体子集,预计最后字体文件大小可接受。
KusStar commented
可以参考:
import react from '@vitejs/plugin-react'
import Fontmin from 'fontmin'
import path from 'path'
import { defineConfig } from 'vite'
import { CJK, literalsCollector } from 'vite-plugin-literals-collector'
const minifyFont = (result) => {
if (result.length > 0) {
const text = result.join()
console.log(text)
const fontmin = new Fontmin()
.src('dist/*.ttf')
.dest('dist/')
.use(Fontmin.glyph({
text,
hinting: false
}))
fontmin.run()
}
}
export default defineConfig({
plugins: [
react(),
literalsCollector({
include: [/\.ts$/, /\.tsx$/],
target: CJK,
onResult: minifyFont
})
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
build: {
brotliSize: false
}
})
注:这里需要使用 .ttf 的字体,fontmin 不支持 minify otf
ComfyFluffy commented
fontmin 转换时报错,改用 pyftsubset。
ComfyFluffy commented
目前的字体处理脚本在编译后运行,方法是直接替换编译后文件夹中的原版字体。但由于字体文件不会改变,编译产生的文件名 hash 相同,可能会导致缓存问题。
KusStar commented
目前的字体处理脚本在编译后运行,方法是直接替换编译后文件夹中的原版字体。但由于字体文件不会改变,编译产生的文件名 hash 相同,可能会导致缓存问题。
加 hash 就行。
建议把脚本都换成 JS/TS 工具链,这种事情都好做。