cssfont-size-adjust屬性：Webページの読みやすさを改善するための強(qiáng)力なツール

CSS屬性により、開発者は大文字の高さではなく小文字の高さに基づいてフォントサイズを指定できるため、特に代替フォントを使用する場合、Webテキストの読みやすさが大幅に向上します。

font-size-adjustこの記事では、

屬性の重要性とプロジェクトでの正しい使用について詳しく説明します。

font-size-adjust

の重要性 ほとんどのWebサイトは主にテキストで構(gòu)成されています。ウェブサイトではテキストが重要であるため、使用するフォントに特に注意を払う必要があります。適切なフォントを選択すると、快適な読書體験が得られる可能性があります。そうしないと、ウェブサイトの読み取りが難しくなる可能性があります。フォントを決定した後、通常、適切なフォントサイズを選択する必要があります。 font-size-adjust

プロパティWebサイト上のすべてのフォントシリーズのフォントサイズを設(shè)定します。ただし、好みのフォントファミリにはしばしば選択されます。問題は、何らかの理由で優(yōu)先フォントが利用できない場合に発生します。ブラウザは、CSSドキュメントにリストされている代替フォントの1つを使用してテキストをレンダリングします。

たとえば、次のCSSルールが與えられた場合、

：

font-size

ブラウザがGoogleフォントから「Lato」をダウンロードできない場合、代わりに次の代替フォントであるVerdanaが使用されます。ただし、

値は、Verdanaではなく「Lato」を考慮して選択される可能性が高いです。

Webフォントのアスペクト比

body {
  font-family: 'Lato', Verdana, sans-serif;
}

< font-size一定のフォントサイズ値の場合、フォントの視覚サイズとその読み取り可能性は大きく異なる場合があります。これは、ケースに敏感なラテン語などのテキストに特に當(dāng)てはまります。この場合、小文字の高さと大文字の文字の高さの比率は、フォントの読みやすさを決定する重要な要素です。この比率は、多くの場合、フォントのアスペクト比と呼ばれます。

前述のように、

>値が設(shè)定されると、すべてのフォントファミリで同じままになります。ただし、代替フォントのアスペクト比が優(yōu)先フォントとは異なる場合、代替フォントの可読性に影響する可能性があります。 この場合、すべてのフォントのx高さを同じ値に設(shè)定できるため、読みやすさを向上させることができるため、

プロパティは非常に重要です。

適切なfont-size値<

屬性を使用することの重要性を理解したので、ウェブサイトでそれを使用する方法を?qū)Wびます。このプロパティには、次の構(gòu)文があります font-size-adjust

の初期値はです。 font-size-adjust値は、異なるフォントシリーズの値が調(diào)整されないことを意味します。

font-size-adjust屬性の値を數(shù)値に設(shè)定することもできます。この番號は、Webページ上のすべてのフォントのxの高さを同じ値に計算するために使用されます。 Xの高さは、指定された數(shù)にフォントサイズを掛けたものに等しくなります。これにより、小さなサイズのフォントの読みやすさが大幅に向上します。これがfont-size-adjust屬性を使用する方法の例です：

body {
  font-family: 'Lato', Verdana, sans-serif;
}

すべてのフォントのXの高さは、20px * 0.6 = 12pxになります。特定のフォントの実際のサイズを変更して、Xの高さが常に12pxのままであることを確認(rèn)できるようになりました。特定のフォントの新しい調(diào)整フォントサイズは、次の式を使用して計算できます。

c =（a / a '）s。

ここで、Cは使用する調(diào)整されたフォントサイズ、Sは指定されたフォントサイズ値、aは

屬性で指定されているアスペクト比、a 'は、必要なフォントのアスペクト比です。調(diào)整。 font-size-adjust

を負(fù)の値に設(shè)定することはできません。 0の値は、テキストに高さを持たないようにします。つまり、テキストは実際に隠されます。 Firefox 40などの古いブラウザでは、0の値はfont-size-adjustからfont-size-adjustの設(shè)定に相當(dāng)します。 none

ほとんどの場合、開発者は通常、いくつかのフォントサイズ値を試して、特定のフォントに最適な値を確認(rèn)します。これは、理想的には、すべてのフォントオプションのX高さが、優(yōu)先フォントのX高さに等しくなることを意味します。言い換えれば、

屬性の最も適切な値は、優(yōu)先フォントのアスペクト比です。 font-size-adjust

フォントのアスペクト比を決定する方法 フォントの正しいアスペクト比を決定するには、サイズ変更されたフォントサイズが指定した元のフォントサイズと同じでなければならないという事実に依存することができます。これは、前の方程式では、aはa 'に等しくなければならないことを意味します。

アスペクト比を計算する最初のステップは、2つの要素を作成することです。両方の要素には、単一の文字とその周囲の境界線が含まれます（これら2つの要素を比較する必要があるため、2文字は同じでなければなりません）。さらに、両方の要素の

屬性値は同じですが、そのうちの1つのみがの値が特定のフォントのアスペクト比に等しい場合、各要素の2文字のサイズは同じになります。

font-sizefont-size-adjustWebサイトで使用font-size-adjust

ブラウザのサポート：現(xiàn)在、Firefoxのみがデフォルトでfont-size-adjustをサポートしています。バージョン43と30から始めて、ChromeとOperaは、実験的なWebプラットフォームにフラグ（Chrome：// Flagsで有効になっている）を備えた後、このプロパティをサポートしています。 EdgeとSafariは、 このプロパティを使用することにした場合、低ブラウザのサポートはまったく問題にならないはずです。このプロパティは、後方互換性を念頭に置いて設(shè)計されています。このプロパティをサポートしていないブラウザはテキストを正常に表示しますが、このプロパティをサポートするブラウザは

プロパティの値に応じてフォントサイズを調(diào)整します。

font-size-adjustfont-size-adjust結(jié)論

このチュートリアルを読んだ後、

屬性の役割、それらの重要性、および異なるフォントのアスペクト比を計算する方法がわかりました。 font-size-adjust

は、古いブラウザで優(yōu)雅に格下げできるため、すぐに使用して、本番Webサイトのテキストの読みやすさを向上させることができます。 font-size-adjust

（記事の最後にある寫真は、記事の冒頭と同じです）

以上がCSSフォントサイズの調(diào)整により、Webタイポグラフィを改善しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。