ncuhome/NCUmap

可以考虑基于 fontmin 将字体文件的字体子集化引入

FuzzyFade opened this issue · 4 comments

https://github.com/ecomfe/fontmin

可以通过解析的 Map.tsx 文件的 text,然后调用 fontmin 生成字体子集,预计最后字体文件大小可接受。

可以参考:

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

fontmin 转换时报错,改用 pyftsubset。

目前的字体处理脚本在编译后运行,方法是直接替换编译后文件夹中的原版字体。但由于字体文件不会改变,编译产生的文件名 hash 相同,可能会导致缓存问题。

目前的字体处理脚本在编译后运行,方法是直接替换编译后文件夹中的原版字体。但由于字体文件不会改变,编译产生的文件名 hash 相同,可能会导致缓存问题。

加 hash 就行。
建议把脚本都换成 JS/TS 工具链,这种事情都好做。