Firefoxの「Bolder」デフォルトは、可変フォントの問題です

可変フォントは、単一のファイルから多様なフォントスタイルの作成を簡素化します。ただし、現在のブラウザレンダリング<strong></strong>そして<b></b>要素は、可変フォントによって提供される幅広いフォント重量値と互換性の課題を提示します。

デフォルトのFont-Weightのブラウザの不一致

<strong></strong>そして<b></b>要素はテキストを強調表示します。ブラウザは、フォントウェイトを増やすことでこれを達成します。これは一般的にうまく機能します。たとえば、MDN Web Docsは使用します<strong></strong>その「問題を発見しましたか？」セクション。

この問題は、カスタムフォントウェイトで発生します。デフォルトは400ですが、 font-weight 1から1000の値を受け入れます。ChromeとFirefoxレンダリング<strong></strong>周囲のテキストのfont-weightに基づいて異なっています。

ChromeとSafariは一貫して700のフォントウェイトを使用しますが、Firefoxはコンテキストに応じて400、700、または900を使用します。

矛盾の原因

ChromeとFirefoxは、ユーザーエージェントStyleSheetsでさまざまなfont-weight値を使用しています。

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

bold 700に相当しますが、 bolderは相対的です。ただし、HTML標準では、 bolder （2012年以降）を推奨しています。これには現在、Firefoxのみがその後に推奨されています。人気のあるノーマライズStyleSheetは、この矛盾に対処します。

デフォルトの評価

Firefoxのデフォルトは標準と一致します。しかし、それは優れていますか？どちらのデフォルトにも欠陥があります。Chromeのbold 、より高いFont-Weights（約700）で失敗しますが、Firefoxのbolderより低い重量（約300）と闘っています。

Firefoxの最悪のシナリオでは、<strong></strong>テキストはほとんど見えなくなります。以下の画像は、Firefoxの349のFont-weightのテキストを示しています。中に言葉を見つけてもらえますか<strong></strong>タグ？ Firefoxはそれを400でレンダリングし、わずか51ポイント増加します。

結論

350フォントウェイト未満の薄いまたは可変フォントを使用する場合、<strong></strong>そして<b></b>Firefoxでは不明瞭かもしれません。これらの要素の手動でfont-weightを設定することは、ブラウザのサブオプティマルデフォルトに依存することを避けるためにお勧めします。

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

bolder 、可変フォントで問題があります。理想的には、周囲のテキストの重量に関係なく、強調されたテキストは簡単に表示される必要があります。一貫したフォント重量増加（たとえば、パーセンテージ）が望ましいでしょう。 CSSワーキンググループは、Lea Verouが示唆しているように、パーセンテージベースのfont-weight値について議論しています。

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

150％の増加は、可変フォントの現在のbold / bolderアプローチよりも優れたデフォルトである可能性があります。

以上がFirefoxの「Bolder」デフォルトは、可変フォントの問題ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。