CSSアンダーラインは薄すぎてクロムが低すぎます

CSSの詳細な説明と修復の提案Chromeブラウザの下線表示

この記事では、Chromeで新しいCSSプロパティのtext-decoration-thicknessとtext-underline-offsetテストする際に発生した2つの問題について説明します。

目次

• デフォルトのアンダースコアは一貫性がありません
• ブラウザのデフォルトスタイルをオーバーライドします
• Chromeバグ1：下線が描かれたMacOSシステムは薄すぎます
• Chromeバグ2：下線付き位置が低すぎます
• 最初にChromeブラウザのバグを解決する方法

デフォルトのアンダースコアは一貫性がありません

テキストリンクを簡単なWebページに追加し、フォントをArialに設定し、さまざまなブラウザーとオペレーティングシステムの下で下線付きディスプレイ効果を比較します。結果は、異なるブラウザのデフォルトのアンダースコアの厚さと垂直位置（ベースラインオフセット）が一貫していないことを示しています。これは、CSSテキスト装飾モジュールの規定に準拠しており、次のデフォルト動作（自動値）を指定します。

ユーザーエージェントは、適切なテキストの装飾ラインの厚さを選択します。 [...]ユーザーエージェントは、適切なアンダースコアオフセットを選択します。

ブラウザのデフォルトスタイルをオーバーライドします

2つの新しいCSSプロパティは、アンダースコアの厚さとオフセットを正確に定義できます。

• text-decoration-thickness
• text-underline-offset

これらの2つのプロパティを使用すると、Firefox（Gecko Engine）やSafari（WebKit Engine）などのさまざまなブラウザでも、一貫したアンダースコア効果を作成できます。

 H1 {
  テキスト装置：下線;
  テキスト - 厚さの厚さ：0.04em;
  テキストアンダーラインオフセット：0.03em;
}

注： text-decoration-thicknessプロパティには、ブラウザにフォント自体の優先下線幅を使用するように指示する特別なfrom-font値があります（利用可能な場合）。テスト後、異なるフォントのアンダースコア効果は依然として一貫していません。

Chromeバグ1：下線が描かれたMacOSシステムは薄すぎます

text-decoration-thicknessプロパティが、非整数ピクセル値として計算されるフォント関連の長さの値に設定されている場合、Chromeは丸めではなく締めくくります。たとえば、宣言された重量が0.06emで、計算が1.92pxの場合、Chromeは2pxではなく1px重量のアンダースコアを引きます。この問題は、MacOSシステムのみに限定されています。

 {
  font-size：2em; *計算結果は32px * /
  テキスト - 厚さ：0.06em; *計算結果は1.92px * /
}

スクリーンショットは、Chrome（3番目の線）のテキスト装飾ラインがSafariおよびFirefoxブラウザーの2倍の薄いことを示しています。

詳細については、Chromium Issue＃1255280を参照してください。

Chromeバグ2：下線付き位置が低すぎます

text-underline-offsetプロパティにより、レターベースラインとアンダースコア（ベースラインに対するアンダースコアのオフセット）の間の距離を正確に設定できます。残念ながら、Chromeブラウザは現時点ではこれを正しく実装していないため、アンダースコアの位置が低すぎます。

 H1 {
  テキスト装置：下線;
  テキストデカールカラー：＃F707;

  / *「スキップインク」を無効にする */
  -webkit-text-decoration-skip：none * /
  Text-Decoration-Skip-ink：なし;

  /*シンクライン全体をカバー*/
  テキスト - 厚さ：0.175em;
  テキストアンダーラインオフセット：0;
}

このバグのため、アンダースコアをベースラインに完全に移動することはできません。

詳細については、Chromium Issue＃1172623を参照してください。

注：上記の画像に示すように、Safariは底の代わりに沈むラインの上部に下線を引きます。これは、最近修正されたWebKitバグです。この修正は、Safariの次のバージョンに含める必要があります。

最初にChromeブラウザのバグを解決する方法

アンダーラインのスタイルに使用される2つの新しいCSSプロパティは、CSSへの追加の追加です。これら2つの関連するクロムバグができるだけ早く修正できることを願っています。これらのCSS機能が重要である場合は、Chromiumのバグトラッカーのこれらのバグに主演を追加して、懸念を表明してください。

以上がCSSアンダーラインは薄すぎてクロムが低すぎますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。