reactjs / reactjs/react.dev

[Beta] Incorrect font weight

Offen
#5,443 2 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

This is the current font weight of paragraphs in the beta docs
image
The computed styles have a font weight of 400 but it is actually 500 because there is no font face for the regular font. there is only a font face for the font of weight 500 and this can be found in index.css that only has the following font faces:

@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://beta.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2')
      format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://beta.reactjs.org/fonts/Optimistic_Display_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://beta.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

The solution would be to add a font face for the regular font because the current font weight for the paragraphs is a bit unreadable.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne in index.css und prüfe die im Issue gezeigten @font-face-Deklarationen für Optimistic Display. Füge den fehlenden regulären Schriftschnitt hinzu und verifiziere anschließend, dass Absätze der Beta-Dokumentation das vorgesehene normale Schriftgewicht verwenden und im Browser besser lesbar sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
css
Bereich
documentation, frontend
Issue-Typ
Bug
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.