Firefoxs 'Bolder' -St Standard ist ein Problem für variable Schriftarten

Variable Schriftarten vereinfachen die Erstellung verschiedener Schriftstile aus einer einzelnen Datei. Das aktuelle Browser -Rendering von jedoch<strong></strong> Und<b></b> Elemente stellt Kompatibilitätsprobleme mit der breiten Palette der von variablen Schriftarten angebotenen Schriftgewichtswerte vor.

Browser-Diskrepanzen in der Standardschrift-Gewicht

<strong></strong> Und<b></b> Elemente heben Text hervor. Browser erreichen dies durch Erhöhen des Schriftgewichts. Dies funktioniert allgemein gut. Zum Beispiel verwendet MDN Web Docs<strong></strong> in seinem "ein Problem gefunden?" Abschnitt.

Das Problem tritt mit benutzerdefinierten Schriftgewichten auf. Während die Standardeinstellung 400 beträgt, akzeptiert font-weight Werte von 1 bis 1000. Chrom- und Firefox-Render<strong></strong> unterschiedlich basierend auf der Schriftgewicht des umgebenden Textes.

Chrome und Safari verwenden durchweg ein Schriftgewicht von 700, während Firefox je nach Kontext 400, 700 oder 900 verwendet.

Die Quelle der Diskrepanz

Chrome und Firefox verwenden unterschiedliche font-weight in ihren User Agent Stylesheets:

 <code>/* Chrome and Safari */ strong, b { font-weight: bold; } /* Firefox */ strong, b { font-weight: bolder; }</code>

bold entspricht 700, während bolder relativ ist. Der HTML -Standard empfiehlt jedoch bolder (seit 2012), eine Empfehlung, die derzeit nur von Firefox befolgt wird. Das beliebte Normalisieren von Stylesheet befasst sich mit dieser Inkonsistenz.

Bewertung der Standardeinstellungen

Die Standardeinstellung von Firefox entspricht dem Standard. Aber ist es überlegen? Beide Standardeinstellungen haben Mängel: Chromes bold fällt bei höheren Schriftgewichten (ca. 700) aus, während Firefoxs bolder Kämpfe mit niedrigeren Gewichten (ca. 300).

In Firefoxs schlimmster Fall, Szenario,<strong></strong> Text wird fast unsichtbar. Das Bild unten zeigt Text mit einem Schriftgewicht von 349 in Firefox. Kannst du das Wort im Inneren erkennen?<strong></strong> Tags? Firefox rendert es bei 400, nur um 51 Punkte.

Abschluss

Bei Verwendung dünner oder variabler Schriftarten unter 350 Schriftgewichtsgewicht,<strong></strong> Und<b></b> könnte in Firefox undeutlich sein. Das manuelle Einstellen font-weight für diese Elemente ist ratsam, um nicht auf den suboptimalen Standard des Browsers zu stützen.

 <code>/* Example: Defining regular and bold font-weights */ body { font-weight: 340; } b, strong { font-weight: 620; }</code>

bolder ist mit variablen Schriftarten problematisch. Im Idealfall sollte der betonte Text leicht sichtbar sein, unabhängig vom Gewicht des umgebenden Textes. Ein konsistenter Schriftgewichtsanheierung (z. B. ein Prozentsatz) wäre vorzuziehen. Die CSS-Arbeitsgruppe diskutiert prozentuale basierte font-weight , wie von Lea Verou vorgeschlagen:

 <code>/* Proposed percentage-based font-weight */ strong, b { font-weight: 150%; }</code>

Eine Erhöhung um 150% ist möglicherweise eine bessere Ausfälle als der aktuelle bold / bolder Ansatz für variable Schriftarten.

Das obige ist der detaillierte Inhalt vonFirefoxs 'Bolder' -St Standard ist ein Problem für variable Schriftarten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!