claude code vibe fix(export): render Monocraft font in minecraft mode PNG export / 修复 minecraft 模式下 PNG 导出的 Monocraft 字体渲染#316
Open
functionstackx wants to merge 1 commit into
Conversation
Drop the manual `fontEmbedCSS` and the `getFontEmbedCSS()` helper so
html-to-image's built-in `getWebFontCSS` runs instead. The previous code
raw-dumped every `@font-face` rule from `document.styleSheets`, but those
rules contain stylesheet-relative font URLs (e.g.
`url("../media/Monocraft-...woff2")`) that can't resolve once embedded
inside an SVG data URL. The browser silently fell back to Arial — which
in minecraft mode replaced the pixel-perfect Monocraft with regular
sans-serif Arial, exactly the bug in #282.
`getWebFontCSS` walks the cloned subtree, resolves each font URL against
its parent stylesheet's href, and inlines the woff2 as a data URL — so
Monocraft renders correctly in the exported PNG.
Fixes #282
Co-authored-by: functionstackx <functionstackx@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
functionstackx
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #282.
Root cause
useChartExport.tspre-suppliedfontEmbedCSStohtml-to-imageby raw-dumping every@font-facerule fromdocument.styleSheets. Those rules contain stylesheet-relative font URLs (e.g.url("../media/Monocraft-...woff2")) that can't resolve once embedded inside an SVG data URL. The browser silently fell back to Arial — which in minecraft mode replaced Monocraft with sans-serif Arial, exactly the bug reported.Fix
Drop the manual
fontEmbedCSSand the now-unusedgetFontEmbedCSS()helper, lettinghtml-to-image's built-ingetWebFontCSSresolve each font URL against its parent stylesheet'shrefand inline the woff2 as a data URL.Verification
pnpm typecheck✅pnpm lint✅packages/appunit tests: 1731/1731 passGenerated with Claude Code
中文说明
修复 minecraft 模式下 PNG 导出时 Monocraft 字体无法渲染的问题。根因是
useChartExport.ts手动提取的@font-face规则包含相对路径的字体 URL，嵌入 SVG data URL 后无法解析，浏览器静默回退到 Arial。修复方案：移除手动字体嵌入，改用html-to-image内置的getWebFontCSS，自动解析并内联字体文件。