Skip to content

🐛 fix(blog): render OG fonts without network access - #84

Draft
zrr1999 wants to merge 2 commits into
codex/typescript-compatibility-guardfrom
codex/offline-og-fonts
Draft

zrr1999 wants to merge 2 commits into
codex/typescript-compatibility-guardfrom
codex/offline-og-fonts

Conversation

@zrr1999

@zrr1999 zrr1999 commented Oct 4, 2026

Copy link
Copy Markdown
Owner

动机

OG 图片构建为每张图片请求 Google Fonts 的 CSS 和字体资源。字体服务或云端网络不可用时,博客构建会失败;中文标题也需要完整的中文字体支持。

解决方案

  • 从锁定的 npm 字体包读取 IBM Plex Mono 的普通与粗体,保留拉丁文字的原有字体。
  • 添加本地思源黑体作为中文后备字体,按实际文本生成普通与粗体子集;源字体在构建进程内只读取一次。
  • 删除联网字体加载器,让站点与文章 OG 模板使用同一离线入口。
  • 在构建 CI 中运行 Vite+ 测试:禁止 fetch 后仍能将中英文普通/粗体文本渲染为 SVG 和 PNG。

说明

依赖 #83,并通过 #83 依赖 #82。迁移沿用 Spore 的本地字体与子集方案;中文后备字体会改善中文标题的显示。

验证:vp install --frozen-lockfile、vp check --fix、vp test run、三个网站的 vp run build、prek run --all-files 与真实提交钩子均通过。博客仍构建 109 页并生成 Pagefind 索引。字体包及子集工具作为构建依赖写入 lockfile。

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Oct 4, 2026 •

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
zrr-website-slides 544978e Commit Preview URL

Branch Preview URL
Oct 10 2026, 03:59 AM

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Oct 4, 2026 •

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
zrr-website-blog 544978e Commit Preview URL

Branch Preview URL
Oct 10 2026, 04:00 AM

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Oct 4, 2026 •

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
zrr-website-root 544978e Commit Preview URL

Branch Preview URL
Oct 10 2026, 04:01 AM

@morirun morirun left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

已审阅 #84 至 791f97a。

阻塞项:

  • GitHub 目前将本 PR 标记为与基线冲突(mergeable_state: dirty),无法直接合入。本地将本分支合并到 codex/typescript-compatibility-guard 并无冲突(ahead 1 / behind 0),但叠加当前 main(#87、#88 的依赖更新)后 pnpm-lock.yaml 冲突。建议在下层 PR 合入后 rebase 到最新基线,并用 vp install 重新生成 lockfile 再推送。

非阻塞:

  • @fontpkg/source-han-sans-sc 解包约 115 MB,而只用到 Regular 和 Bold 两个 OTF,会拉长 CI 与 Cloudflare 构建的安装时间。可考虑只含所需字重的字体包,或在仓库内保存两个字重的 OTF。
  • @fontsource/ibm-plex-mono 只取 latin 子集;原先 Google Fonts 按 text= 返回完整覆盖,标题中若出现 latin-ext 字符,现在会回退到思源黑体。目前标题都能正常渲染,可以接受,在此记录一下。

核对:

  • 原 loadGoogleFont 把粗体的 style 写成 "bold"(Satori 只接受 normal/italic),本 PR 改为 weight: 700, style: "normal",是正确的修复。
  • 源字体通过模块级 Promise 只读取一次,中文按实际文本生成子集;CI 日志显示每张 OG 图约 50–150 ms。
  • 本地将 #82–#84 合并到当前 main 并重新生成 lockfile 后:vp test run 3 个测试文件通过,vp run build 三站点通过,博客 109 页。
  • 测试禁用了 fetch,并覆盖中英文的普通与粗体 SVG/PNG 渲染,符合「离线构建」的目标。

结论:

  • 代码可以合入;需先 rebase 并重新生成 lockfile。

@gitar-bot

gitar-bot Bot commented Oct 10, 2026

Copy link
Copy Markdown
Code Review ✅ Approved

🟡 Medium risk · Local font loading and text subsetting replace network fonts for OG images; failures could break blog image generation or render glyphs incorrectly.

Moves OG image font loading to local packages so builds no longer fetch Google Fonts, using bundled IBM Plex Mono and a Noto Sans SC subset as the Chinese fallback. No issues found.

Review coverage

📋 Rules No rules evaluated

🧪 Functional validation Not enabled · Set up

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Counting what did not apply, without listing it.

Comment with these commands to change the behavior for this request:

Auto-apply Compact
gitar auto-apply:on         
gitar display:verbose         

Important

Your trial ends in 3 days — upgrade now to keep code review, CI analysis, auto-apply, custom automations, and more.

Was this helpful? React with 👍 / 👎 | Gitar

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants