CSS の font-size-adjust がベースラインに追加されました

対応ブラウザ

  • 127
  • 127
  • 3
  • 16.4

ソース

このたび、CSS の font-size-adjust プロパティが Chrome に追加されました。 Baseline の新規利用可能に含まれるようになりますこのプロパティにより、 代替フォントの読み込み時にレイアウトがシフトし、 小さいフォントサイズで代替フォントを見やすくします。font-size-adjust プロパティが Interop 2024、 これは、Google Cloud と Terraform の相互運用性を改善する 説明します。

問題

形状とサイズに応じて、同じサイズに設定された 2 つのフォントを比較したとき 表示されるテキストが占めるスペースが大きくなります。 たとえば、次のデモでは、Verdana と Arial のテキスト、 どちらも 16 ピクセルに設定します

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">で確認できます。 Verdana と Arial で 16 ピクセルで表示されるテキスト。

サイズの違いは、アスペクト値、 フォントの大文字と比較した場合の小文字の高さ フォントによって異なります。

これにより、異なるアスペクト値のフォントを使用すると、2 つの問題が発生する可能性があります。 使用できますまず、フォントが占めるスペースの大きさが変わります。 次に、選択した代替フォントは、フォントよりも読みにくくなる可能性があります。 特に小さいフォントサイズで指定されます。これは、 小文字と大文字の相対的な高さは、 見やすくします。

font-size-adjust の仕組み

font-size-adjust プロパティを使用すると、フォールバック フォントをより見栄えよく調整できます。 一致します。次の例は、2 つのフォントを示しています。 今度は 1 つ目のフォントに合わせて 2 つ目のフォントが調整されました。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">で確認できます。
font-size-adjust の使用。

この例では、単一の値である数値を使用します。これにより、 デフォルトのフォント指標 ex-height。これは x-height の比率で、 フォントの小文字の x の高さをフォントサイズに変更する。また、フォント サイズを 表示されます。次の例では、 数字に加えて ch-width キーワードも追加する必要があります。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">で確認できます。 ch-width フォント指標で font-size-adjust を使用。

設定可能なすべての値を確認するには、 font-size-adjust の MDN ドキュメント

代替フォントを使用してサイトを確認し font-size-adjust で調整すると、代替フォントを使用している読者に役立ちます 特に、どこでも利用できるようになりました。