Back to Question Center
0

CSSのフォントサイズ調整でウェブタイポグラフィを改善する            CSSによるWebタイポグラフィの改善Font Size AdjustRelated Topics: CSSBootstrapSassFrameworksAudio& & & セマルト

1 answers:
CSSでウェブタイポグラフィを改善するフォントサイズ調整

CSSのフォントサイズ調整でウェブタイポグラフィを改善するCSSによるWebタイポグラフィの改善Font Size AdjustRelated Topics:
CSSBootstrapSassFrameworksAudio&Semalt

この記事は、Panayotis Matsinopoulosによってピアレビューされました。 SitePointのコンテンツを最高にするためのSitePointのピアレビューアのおかげで、これは最高のものです!

CSSの font-size-adjust プロパティは、開発者が大文字ではなく小文字の高さに基づいてfont-size を指定できるようにします。これにより、Web上のテキストの読みやすさが大幅に向上します。

この記事では、 font-size-adjust プロパティの重要性と、プロジェクトで正しく使用する方法について学習します。

フォントサイズ調整の重要性

あなたが訪問するほとんどのウェブサイトは、主にテキストで構成されています。書かれた単語はウェブサイトの重要な部分なので、あなたの情報を表示するために使用している書体に特別な注意を払うことは理にかなっています。適切な書体を選択すると、読書が楽しくなります。セマルト、間違ったものを使うと、ウェブサイトが判読不能になる可能性があります。使用する書体を決定したら、通常は適切なサイズを選択します。

font-size プロパティは、Webサイトで使用するすべての font-family オプションのサイズを設定します。しかし、ほとんどの場合、あなたの最初の font-family オプションがよく見えるように一般的に選択されます。何らかの理由で最初の選択肢が利用できず、ブラウザがCSS文書にリストされたフォールバックフォントの1つを使用してテキストをレンダリングするときに問題が発生します。

例えば、このCSSルールを考えると、

   体{font-family: 'Lato'、Verdana、sans-serif;}   

ブラウザがGoogleフォントからダウンロードする「Lato」が利用できない場合は、次のフォールバックフォント(この場合はVerdana)が代わりに使用されます。しかし、 font-size の値は、Verdanaではなく、「Lato」を念頭に置いて選択されている可能性があります。

Webフォントのアスペクト値は何ですか?

フォントの見た目の大きさと読みやすさは、定数 font-size の値によって大きく異なる可能性があります。ラテン文字のような大文字と小文字を区別するスクリプトの場合は特にそうです。そのような場合、小文字の高さとその大文字の高さの比は、与えられたフォントの読みやすさを決める上で重要な要素です。この比率は、通常、フォントの アスペクト値 と呼ばれます。

前述のように、font-size の値を設定すると、すべてのフォントファミリで一定のままです。ただし、これは、アスペクト値が第1選択フォントのアスペクト値と大きく異なる場合、フォールバックフォントの読みやすさに影響することがあります。

font-size-adjust プロパティの役割は、すべてのフォントのx-heightを同じ値に設定して読みやすくすることができるため、このような状況で非常に重要になります。

font-size-adjust

の正しい値の選択

font-size-adjust プロパティを使うことの重要性を知ったので、今度はあなたのウェブサイトでそれを使う方法を学ぶべき時です。このプロパティの構文は次のとおりです。

   font-size-adjust:none | <数字>   

font-size-adjust の初期値は none です。値 none は、異なる font-family オプションのfont-size の値を調整しないことを意味します。

また、 font-size-adjust プロパティの値を数値に設定することもできます. xの高さは与えられた数に font-size を掛けたものに等しい。これにより、小さなサイズでのフォントの読みやすさがかなり向上します。以下は、 font-size-adjust プロパティの使用例です。

   font-size:20px;font-size-adjust:0. 6;    

すべてのフォントのx高さは20px * 0. 6 = 12pxになります。特定のフォントの実際のサイズは、x-heightが常に12ピクセルになるように変更できます。与えられたフォントの新しい調整済み フォントサイズ は、次の式を使用して計算できます。

c =(a / a ')s となる。

は指定されたフォントサイズ の値であり、 は使用されるフォントサイズ ) は font-size-adjust プロパティで指定されたアスペクト値であり、 a ' は調整が必要なフォントのアスペクト値です。

font-size-adjust を負の値に設定することはできません。 0の値は高さのないテキストになります。つまり、テキストは効果的に隠されます。 Firefox 40のような古いブラウザでは、0の値はfont-size-adjust を none に設定するのと同じです。

ほとんどの場合、開発者は一般的にフォントサイズ 値を数回 試して、特定のフォントに最適なものを確認します。つまり、理想的には、すべてのフォントオプションのx高さを最初の選択フォントのx高さに等しくすることが望ましいでしょう。つまり、 font-size-adjust プロパティに最も適した値は、最初に選択したフォントのアスペクト値です。

フォントのアスペクト値を知る方法

フォントの正しいアスペクト値を決定するには、調整済みのフォントサイズ が指定した元のフォントサイズ と同じでなければならないという事実に頼ることができます。これは、前の式の a a ' と等しくなければならないことを意味します。

アスペクト値を計算するための最初のステップは、2つの 要素の作成です。両方の要素には、それぞれの文字の周りに1つの文字と境界線が含まれます(これらの文字は両方の 要素で同じでなければなりません)。また、両方の要素は font-size プロパティで同じ値を持ちますが、そのうちの1つだけ font-size-adjust プロパティも使用します。 font-size-adjust の値が与えられたフォントのアスペクト値と等しい場合、各 要素の両方の文字は同じサイズになります。

次のデモでは、文字「t」と「b」の周りに境界線を作成し、各ペアに異なる font-size-adjust 値を適用しました。

該当するスニペットを読む:

   。調整されたa {font-size-adjust:0 - band auftritt modische. 4;}。調整されたb {font-size-adjust:0. 495;}。調整されたc {font-size-adjust:0. 6;}   

下のライブデモでもわかるように、font-size-adjust の値を大きくすると文字が大きくなり、値を小さくすると文字が小さくなります。 font-size-adjust がアスペクト値と等しくなると、ペアは同じサイズになります。

CodePenのSitePoint(@SitePoint)によるペンのアスペクト値の決定を参照してください。

ウェブサイト上のfont-size-adjustの使用

以下のデモでは、前のCodePenデモで 'Lato'フォントを計算した font-size-adjust 値を使用して、 'Verdana'のfont-size フォールバックフォントとして機能します。ボタンを押すと調整がオンまたはオフになり、自分で違いを見ることができます:

CodePenのSitePoint(@SitePoint)によるWebサイトのfont-size-adjustの使用によるペンを参照してください。

より多くのテキストを扱うときに効果が顕著になります。 Semalt、上の例は、あなたにこのプロパティの有用性の考えを与えるのに十分であるはずです. バージョン43と30から、ChromeとOperaはchrome://フラグで有効にすることができる "Experimental Web Platform Features"フラグの背後にあるこのプロパティをサポートしています。 EdgeとSafariは font-size-adjust プロパティをサポートしていません。

このプロパティを使用する場合は、ブラウザのサポートを下げることはまったく問題ではありません。このプロパティは下位互換性を考慮して設計されています。サポートしていないブラウザはテキストを通常表示しますが、ブラウザは font-size-adjust プロパティの値に基づいて font-size を調整します。

結論

チュートリアルを読んだ後で、 font-size-adjust プロパティが何をしているのか、なぜ重要なのか、そして異なるフォントのアスペクト値をどうやって解決するのかがわかります。

古いブラウザでは font-size-adjust が正常に機能しなくなるため、現時点で使用して本番用Webサイトのテキストの読みやすさを向上させることができます。

ユーザーがフォントのアスペクト値をすばやく計算するのに役立つツールやヒントを知っていますか?コメントに仲間の読者に知らせてください。

March 1, 2018