Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

fonts gate before composition scripts only covers faces that static markup already uses

Đang mở
  • Có gì không ổn?
#5,112 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@user-github-me đang làm issue này rồi.

Từ ngày 8/10/2026.

  • #5202 của @user-github-me — đang mở
  • #5203 của @user-github-me — đang mở

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
html, typescript
Lĩnh vực
frontend, performance

Hướng nghiên cứu

Start by inspecting the composition-script font-readiness gate changed in #4980 and reproduce with the attached index.html, local font, and render --workers 1; compare script-time measurements with document.fonts.load() results. The issue outlines two possible approaches but does not choose between them, so the fix needs investigation and a decision. Done when script-built text measures with its intended font before composition scripts proceed, without breaking the existing timeout behavior.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Since 0.8.122 (#4980) composition scripts start only after web fonts are ready, which fixed measure-after-build layouts for fonts that static markup uses. The gate does not cover a face that only script-built text uses: it forces one layout, then awaits document.fonts.ready, and a face starts loading only when some text already in the DOM requests it. Text created by the composition script requests its face afterwards, so a getBoundingClientRect() taken at script time still sees the fallback font for that face. Which faces are loaded when a script runs therefore depends on what other scenes in the assembled page happen to show statically.

Repro (two files, attached): a local @font-face ("LocalFace", font-display: block, embedded by the compiler as a data URI) that no static text uses. The script sets a title in that face, measures it, centres it from the measurement, registers the timeline, then measures again inside document.fonts.load() and writes both numbers into the frame.

  • v0.8.135, render --workers 1: script-time width 1378.1 status unloaded / after fonts.load width 1056.5 status loaded. The title is centred from the first number, so it sits 161 px off centre in the final frame.
  • Control: uncomment the one static <span> in the face and both widths are 1056.5 with status loaded at script time.

Same mechanism with the compiler-fetched Google face: in a nine-scene project, a script-built block measured correctly only because an unrelated scene's static label happened to use the same weight; a second script-built block whose rows use a different weight measured 4 px short and was centred 2 px off. A handwritten title whose underline is drawn to the measured width rendered the underline 253 px too long and the title 114 px off centre in every render.

Two fixes look possible from the outside:

  1. Before releasing the scripts, call load() on every declared FontFace (Array.from(document.fonts).map((f) => f.load())) under the existing 5 s cap, so the stated guarantee holds for script-built text too.
  2. A lint finding when a composition script calls getBoundingClientRect / offsetWidth / offsetHeight outside a document.fonts.load() / document.fonts.ready callback, with the fix hint to measure inside it and register the timeline at the end (the documented async-build path).

Repro project (index.html, assets/fonts/local-face-700.woff2, package.json, hyperframes.json) and the rendered frame attached. Render log lines come from the page console as surfaced by the CLI.

Attachments: repro-bundle.zip (the four repro files)

rendered frame: script-time width 1378.1 px vs 1056.5 px after fonts.load
Ngôn ngữ chính
TypeScript
Star
54.1k
Fork
4.9k
Merge trung bình
7 giờ 19 phút
Pull request đã merge (30 ngày)
746

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của heygen-com/hyperframes

Tất cả issue của heygen-com/hyperframes

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.