このたび、CSS の font-size-adjust プロパティが Chrome に追加されました。
Baseline の新規利用可能に含まれるようになりますこのプロパティにより、
代替フォントの読み込み時にレイアウトがシフトし、
小さいフォントサイズで代替フォントを見やすくします。font-size-adjust
プロパティが
Interop 2024、
これは、Google Cloud と Terraform の相互運用性を改善する
説明します。
問題
形状とサイズに応じて、同じサイズに設定された 2 つのフォントを比較したとき 表示されるテキストが占めるスペースが大きくなります。 たとえば、次のデモでは、Verdana と Arial のテキスト、 どちらも 16 ピクセルに設定します
<ph type="x-smartling-placeholder">サイズの違いは、アスペクト値、 フォントの大文字と比較した場合の小文字の高さ フォントによって異なります。
これにより、異なるアスペクト値のフォントを使用すると、2 つの問題が発生する可能性があります。 使用できますまず、フォントが占めるスペースの大きさが変わります。 次に、選択した代替フォントは、フォントよりも読みにくくなる可能性があります。 特に小さいフォントサイズで指定されます。これは、 小文字と大文字の相対的な高さは、 見やすくします。
font-size-adjust の仕組み
font-size-adjust プロパティを使用すると、フォールバック フォントをより見栄えよく調整できます。
一致します。次の例は、2 つのフォントを示しています。
今度は 1 つ目のフォントに合わせて 2 つ目のフォントが調整されました。
font-size-adjust の使用。この例では、単一の値である数値を使用します。これにより、
デフォルトのフォント指標 ex-height。これは x-height の比率で、
フォントの小文字の x の高さをフォントサイズに変更する。また、フォント サイズを
表示されます。次の例では、
数字に加えて ch-width キーワードも追加する必要があります。
font-size-adjust を使用。設定可能なすべての値を確認するには、
font-size-adjust の MDN ドキュメント
代替フォントを使用してサイトを確認し
font-size-adjust で調整すると、代替フォントを使用している読者に役立ちます
特に、どこでも利用できるようになりました。