Variable @font-face without font-weight projects to a 400-only theme.json face, so headings render lighter

Chiusa Adatta ai principianti
  • Qualcosa non va?
#4,621 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
php, wordpress
Ambito
backend

Direzione di ricerca

Leggi php-transformer/src/WordPressSitePlan/ThemeJsonProjection.php, in particolare la proiezione da @font-face a fontFace, e trova i test esistenti per la proiezione dei font face. Aggiungi il fixture neutro con un face senza font-weight e uno che dichiara 700; il lavoro è concluso quando i valori proiettati sono rispettivamente "auto" e "700" e i test esistenti passano.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Finding

Source: https://adriarenas.figma.site/ (Static Site Importer 1.33.367, Data Liberation Agent 0.33.137, WordPress 7.1.4)

Display headings render lighter in WordPress than in the source, even though both compute to font-weight: 800.

The source declares its variable font without a font-weight descriptor:

@font-face { font-family: "Display"; font-style: normal; src: url(var.woff2); }
h1 { font-family: "Display"; font-weight: 800; }

An absent descriptor means auto, so the face covers the font's own wght axis (200–800 here) and font-weight: 800 selects the 800 instance.

ThemeJsonProjection copies the face into theme.json without fontWeight. WordPress WP_Font_Face fills in font-weight: 400 when the key is missing ($font_face_property_defaults), so the printed face is declared as weight 400 only. The browser then clamps the variable axis to 400.

Chromium measurements with the same font file and text set at font-weight:800:

@font-face font-weight rendered width
(absent) 437.6px
auto 437.6px
200 800 437.6px
400 (what WordPress prints) 416.2px

Owning layer

php-transformer/src/WordPressSitePlan/ThemeJsonProjection.php, in the @font-face to fontFace projection: if (null !== $weight) $face['fontWeight'] = $weight;.

Desired result

A source @font-face without font-weight projects to a theme.json fontFace that keeps the CSS default (fontWeight: "auto"). WordPress prints it verbatim, because WP_Font_Face only requires a string. Faces that declare a weight keep it unchanged.

Acceptance

  • A neutral fixture: one @font-face without font-weight and one with font-weight: 700. The projected fontFace entries are auto and 700 respectively. The test fails on trunk.
  • Existing font-face projection tests pass.

AI disclosure: investigated and drafted by Claude (Anthropic) running in the Pi coding agent for @chubes4, from a Studio import of the source above; measurements were taken with Playwright/Chromium.

Lingua principale
PHP
Stelle
25
Fork
3
Merge medio
2h 23m
PR unite (30g)
942

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Automattic/blocks-engine

Tutte le issue di Automattic/blocks-engine

Issue simili

Altre issue su PHP

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.