[ESM only] fonttools for nodejs or web with vite plugin, powered by pyodide
npm install @subframe7536/fonttoolsfonttools for nodejs or web with vite plugin, powered by pyodide
pyodide version: 0.27.1
fonttools binary file is not included in pyodide by default, you need to download it from JsDelivr at runtime, and the URL seems not allowed to customize. So I package all the needed file and provide a vite plugin to optimize.
shell
npm install @subframe7536/fonttools
`
`shell
yarn add @subframe7536/fonttools
`
`shell
pnpm add @subframe7536/fonttools
`
$3
#### NodeJS
`ts
import { readFileSync, writeFileSync } from 'node:fs'
import { loadInNode } from '@subframe7536/fonttools'
import { generateBasicScript, handleFontBuffer, NameId, processNameScriptUtil } from '@subframe7536/fonttools/utils'
const buf = new Uint8Array(readFileSync('./test.ttf'))
loadInNode({ woff2: true })
.then(async (py) => {
const data = await handleFontBuffer(
py,
buf,
generateBasicScript(${processNameScriptUtil}
)
)
writeFileSync('change_name.ttf', data)
return py
})
.then(async (py) => {
const data = await handleFontBuffer(
py,
buf,
(input, output) =>
)
writeFileSync('output.woff2', data)
})
`
#### Web
`ts
import { generateBasicScript, handleFontBuffer, NameId } from '@subframe7536/fonttools/utils'
import { loadInBrowser } from '@subframe7536/fonttools/web'
import src from './test.ttf'
const buf = await (await fetch(src)).arrayBuffer()
const py = await loadInBrowser()
const data = await handleFontBuffer(
py,
new Uint8Array(buf),
generateBasicScript(
),
)
// download
const url = URL.createObjectURL(new Blob([data]))
const a = document.createElement('a')
a.href = url
a.download = 'output.ttf'
a.click()
a.remove()
`
$3
Copy assets to root while building
`ts
import { fonttools } from '@subframe7536/fonttools/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [fonttools()],
})
`
#### Custom URL
There are 6 assets that the plugin handled:
- 2 .whl file: For fonttools and brotli(for woff2)
- 1 lock file: Load .whl
- 1 asm.js file: EMScript generated file
- 1 asm.wasm file: EMScript generated file
- 1 zip file: Python stdlibs
And importer that use loadInBrowser imports lock file, asm.js, asm.wasm and zip file
Final loaded url pattern: {indexURL}{urlPrefix}{assetsName}
By default, all the assets is loaded from the same directory as importer in production.
You should set it if your build.assetsDir or build.rollupOptions.output.assetFileNames is modified.
So, here is a example to custom assets url:
`ts
fonttools({
customURL: (
currentAssetsKey: AssetsKey,
assetsNameMap: Map,
finalAssetsPathMap: Map,
importer: [path: string, code: string]
) => deep/${finalAssetsPathMap.get(currentAssetsKey)![0]}
})
`
$3
See in cdn.html
For esm.sh, you may need to setup options.stdlibURL and options.whlURL` to correctly load