CSSフォントサイズの調整により、Webタイポグラフィを改善します

cssfont-size-adjust属性：Webページの読みやすさを改善するための強力なツール

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

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

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

font-size-adjust

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

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

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

：

font-size

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

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

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

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

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

前述のように、

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

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

適切なfont-size値<

属性を使用することの重要性を理解したので、ウェブサイトでそれを使用する方法を学びます。このプロパティには、次の構文があります font-size-adjust

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

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

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

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

c =（a / a '）s。

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

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

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

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

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

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

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

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

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

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

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

font-size-adjustfont-size-adjust結論

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

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

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

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

以上がCSSフォントサイズの調整により、Webタイポグラフィを改善しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。