Variable Schriften erleichtern das Erstellen einer großen Auswahl an Schriftstilen aus einer einzigen Schriftdatei. Leider ist die Standarddarstellung der Elemente <b> und <strong> in heutigen Browsern nicht sehr kompatibel mit der großen Bandbreite an font-weight-Werten, die variable Schriften ermöglichen.
Browser uneinig über die Standard-font-weight von <b>
Der Zweck der Elemente <b> und <strong> ist es, die Aufmerksamkeit auf ein bestimmtes Wort oder einen Textabschnitt auf der Seite zu lenken. Browser lassen diese Elemente durch Erhöhung ihrer font-weight hervorstechen. Das funktioniert unter normalen Bedingungen gut. Zum Beispiel verwendet MDN Web Docs <b> an einigen Stellen in der „Found a problem?“-Karte am unteren Rand jeder Seite.
Die Dinge werden komplizierter, wenn der Text auf der Seite eine benutzerdefinierte font-weight hat. Das Standardgewicht von Text ist 400, aber die Eigenschaft font-weight akzeptiert jede Zahl zwischen 1 und 1000 (einschließlich). Schauen wir uns an, wie Chrome und Firefox Text, der in <b> eingeschlossen ist, standardmäßig rendern, abhängig von der font-weight des umgebenden Textes.
Chrome und Firefox sind sich uneinig über das Standard-Rendering von <b>-Elementen. Chrome verwendet eine konstante font-weight von 700 (Safari verhält sich gleich), während Firefox je nach font-weight des umgebenden Textes zwischen drei Werten (400, 700 und 900) wählt.
Woher kommt dieser Unterschied?
Wie Sie vielleicht schon erraten haben, verwenden Chrome und Firefox unterschiedliche font-weight-Werte für die Elemente <b> und <strong> in ihren User-Agent-Stylesheets.
/* Chrome and Safari’s user agent stylesheet */
strong, b {
font-weight: bold;
}
/* Firefox’s user agent stylesheet */
strong, b {
font-weight: bolder;
}Die Werte bold und bolder sind im CSS Fonts-Modul spezifiziert; bold ist äquivalent zu 700, während bolder ein relatives Gewicht ist, das wie folgt berechnet wird:
Wenn der äußere Text eine font-weight von hat… | berechnet sich das bolder -Schlüsselwort zu… |
|---|---|
1 bis 349 | 400 |
350 bis 549 | 700 |
550 bis 899 | 900 |
900 bis 1000 | Keine Änderung (gleicher Wert wie der äußere Text) |
Chrome und Firefox sind sich uneinig über das Standard-Rendering von <b>, aber welcher Browser folgt den Standards genauer? Die font-weight-Eigenschaft selbst ist im CSS Fonts-Modul definiert, aber die vorgeschlagenen font-weight-Werte für verschiedene HTML-Elemente befinden sich im Rendering-Abschnitt des HTML-Standards.
/* The HTML Standard suggests the following user agent style */
strong, b {
font-weight: bolder;
}Der HTML-Standard schlug bereits 2012 bolder anstelle von bold vor. Bis heute folgt nur Firefox dieser Empfehlung. Chrome und Safari haben den Wechsel zu bolder nicht vollzogen. Aufgrund dieser Inkonsistenz hat das beliebte Normalize-Stylesheet eine CSS-Regel, die bolder über Browser hinweg erzwingt.
Welcher der beiden Standards ist besser?
Es gibt zwei unterschiedliche Standards in Browsern, und Firefoxs Standard entspricht dem Standard. Sollte Chrome also mit Firefox übereinstimmen, oder ist Chromes Standard der bessere? Schauen wir uns das Standard-Rendering des <b>-Elements noch einmal an.
Jeder der beiden Standards hat eine Schwachstelle: Chromes bold-Standard versagt bei höheren font-weight-Werten (um 700), während Firefoxs bolder-Standard ein Problem mit niedrigeren font-weight-Werten (um 300) hat.
Im schlimmsten Fall für Firefox wird Text, der in <b> eingeschlossen ist, praktisch unkenntlich. Der folgende Screenshot zeigt Text mit einer font-weight von 349 in Firefox. Können Sie das einzelne Wort erkennen, das in <b> eingeschlossen ist? Firefox rendert dieses Element mit einer Standard-font-weight von 400, was einer Erhöhung von nur 51 Punkten entspricht.
Die Quintessenz
Wenn Sie dünne Schriften oder variable Schriften mit font-weight-Werten unter 350 verwenden, seien Sie sich bewusst, dass die Elemente <b> und <strong> in Firefox möglicherweise nicht immer standardmäßig erkennbar sind. In diesem Fall ist es wahrscheinlich eine gute Idee, manuell eine benutzerdefinierte font-weight für <b> und <strong> zu definieren, anstatt sich auf den suboptimale Standard des Browsers zu verlassen, der die font-weight dieser Elemente unzureichend erhöht.
/* Defining the regular and bold font-weight at the same time */
body {
font-weight: 340;
}
b,
strong {
font-weight: 620;
}Der Wert bolder ist veraltet und funktioniert nicht gut mit variablen Schriften. Im Idealfall sollte Text, der in <b> eingeschlossen ist, leicht zu erkennen sein, *unabhängig* von der font-weight des umgebenden Textes. Browser könnten dies erreichen, indem sie die font-weight immer um den gleichen oder einen ähnlichen Betrag erhöhen.
Darüber hinaus gibt es eine Diskussion in der CSS Working Group darüber, Prozentsätze bei font-weight auf die gleiche Weise zuzulassen wie bei font-size. Lea Verou schreibt
Ein weitaus häufigerer Anwendungsfall ist, wenn wir einen fetteren oder leichteren Strich als der umgebende Text wünschen, auf eine Weise, die unabhängig vom Gewicht des umgebenden Textes ist.
/* Increasing font-size by 100% */
h1 {
font-size: 200%;
}
/* PROPOSAL - Increasing font-weight by 50% */
strong, b {
font-weight: 150%;
}Unter Berücksichtigung variabler Schriften wäre ein Wert wie 150% wahrscheinlich ein besserer Standard als die aktuellen bold/bolder-Standards in heutigen Browsern.
Ehrlich gesagt, ich denke, Firefox hat den richtigen Standard, aber die Implementierung ist schlecht. Anstatt hartcodierte Schritte zu verwenden, sollten sie einfach +300 auf "bolder" anwenden. Ich stimme zu, dass zumindest bei der Beispielschrift der Unterschied zwischen 300 und 400 zu gering ist, um nutzbar zu sein.
Andererseits ist der Chrome/Blink-Stil, immer Gewicht 700 zu verwenden, sehr einfach zu verstehen, schlägt aber fehl, wenn der umgebende Text ein Gewicht über 550 hat, da der Gewichtsunterschied zu gering oder sogar in die falsche Richtung geht.
Firefox folgt der HTML-Spezifikation, also ist es in dieser Hinsicht besser als die anderen Browser. Dennoch sollten sie einen Sprung von +200 oder so für bolder einführen. Das wird überall funktionieren.
Der Titel des Artikels ist fair, erweckt aber den Eindruck, dass andere Browser dieses Problem nicht haben, obwohl sie tatsächlich schlechter dran sind.
Der Titel dieses Artikels ist ziemlich irreführend. Das Problem liegt nicht am "Firefox's 'bolder' default", sondern daran, dass die 'bolder'-Spezifikation seltsam und neuerdings veraltet ist.
Die 'bold'-Standards von Chrome und Safari sind falsch und sogar schlechter als die von Firefox. Ein Text über 600 mit standardmäßig 700 fett ergibt keinen Sinn.
Ein besserer Titel wäre: " und Standard-Spezifikation ist ein Problem für Variable Fonts"
Der Titel des Artikels ist kurz und kann unterschiedlich interpretiert werden. Was mir als Autor wichtig ist, ist, dass der Text des Artikels korrekt und objektiv ist. Ich denke, ich habe deutlich gemacht, dass ich nicht mit dem Finger auf Firefox zeige. Nur Leute, die nicht über den Titel hinauslesen, werden eine falsche Nachricht erhalten.
Der Grund, warum ich "Firefox" anstelle von "die Spezifikation" im Titel gewählt habe, ist, dass ich glaube, dass das, was in Browsern implementiert wird, wichtiger ist als das, was in Spezifikationen steht, daher ist es für mich sinnvoller, den Fokus auf die Browser zu legen. Ein Problem in einer Spezifikation ist unbedeutend, wenn kein Browser es implementiert, aber ein Problem in einem Browser ist immer wichtig.