CSSフォントサイズ：決定的なフォントサイズのガイド

CSSフォントサイズの設定は簡単に思えますが、実際に動作するのは難しいです。多くの開発者は、視覚効果を実現するためにfont-size属性に対する繰り返しの調整に依存していますが、異なるブラウザーのレンダリング結果が一貫していないことがわかります。 CSSフォントサイズの設定を深く理解すると、結果の2倍の努力が行われます。

キーポイント

• cssfont-sizeプロパティは、絶対、相対値、長さの値を含むさまざまなパラメーターを受け入れます。明示的に上書きされない限り、要素は親要素のフォントサイズを継承します。これは、相対サイズを指定する際に重要です。
• 絶対フォントサイズのキーワードを使用できますが、その正確なサイズはブラウザ間で大きく異なるため、開発者は通常この大まかなアプローチを避けます。相対フォントサイズのキーワードは、親要素のサイズに応じてフォントサイズを調整します。絶対長さの値でフォントサイズを設定できますが、いくつかの問題に遭遇する可能性もあります。潜在的なアクセシビリティの問題にもかかわらず、ピクセル値が依然として最も適切です。
• 開発者は一般に、ほとんどの場合、emまたは%ユニットを使用することが、互いに正確にスケーリングし、ブラウザのテキストのサイズ変更をサポートするため、Webフォントを扱うための最良のソリューションであると考えています。古いブラウザーでテキストをより良くするテキストをタグにパーセンテージフォントサイズを使用することをお勧めします。

font-sizeプロパティ

font-size属性は、任意のHTMLタグに使用できます（通常、<br>などのテキストコンテンツが含まれていない場合でも）。さまざまな絶対、相対値、または長さの値パラメーターを割り当てることができます。要素は、親要素をオーバーライドしない限り、font-sizeを継承します。これは、相対サイズを指定する場合に特に重要です。

絶対フォントサイズキーワード

複数の絶対フォントサイズキーワードを使用できます。フォントサイズはブラウザのプリセットによって決定され、要素は親要素のサイズを継承しません。

• font-size: xx-small;
• font-size: x-small;
• font-size: small;
• font-size: medium;
• font-size: large;
• font-size: x-large;
• font-size: xx-large;

ほとんどのブラウザはこれらのキーワードをサポートしていますが、正確なサイズは異なります。これらは、ほとんどの開発者が一般的に回避するフォントサイズを設定するかなり大まかな方法​​です。

相対フォントサイズキーワード

2つの相対フォントサイズのキーワードを使用できます。フォントサイズは、その親要素サイズに基づいて決定されます。

• font-size: smaller;
• font-size: larger;
たとえば、

親要素のフォントサイズが「中」の場合、「より大きな」値は要素を「大きな」に設定します。他のフォントユニットは通常、約1.2の係数に調整されますが、標準はなく、ブラウザの結果は異なります。

絶対長

font-size属性は、絶対長さ：

を割り当てることができます

• mm：mm、たとえば10mm。
• cm：cm、1cm（= 10mm）。
• in：インチ、たとえば0.39in（〜= 10mm）。
• pt：1ポンドは、通常1/72インチであると想定されています。 12pt
• ：カードは1pcで12ptです。 pc
• ：ピクセル、たとえばpx。 14px

一般的に言えば、これらすべての測定単位に問題があります。画面ベースのメディアでは、ミリメートル、センチメートル、インチが不正確です。システムは異なるDPI設定を使用できるため、ポンドとPokersは信頼できません。ピクセルは最も適合しているようですが、IEでテキストを変更できないため、アクセシビリティの問題を引き起こす可能性があります。

相対長

属性は、親要素フォントサイズに関連してユニットを割り当てることができます：font-size

• ：1EMは現在のフォントサイズに等しいため、2EMはサイズの2倍です。 em
• ：100％は現在のフォントサイズに等しいため、200％はサイズの2倍です。 %
• ：1exは、現在のフォントの文字「x」の高さに等しくなります。 ex

「EX」を使用する開発者はほとんどいませんが、0.525EMではなく1EXなど、細粒のフォントサイズが必要な場合には役立ちます。 50％= 0.5EM、100％= 1EM、120％= 1.2EMなど、パーセンテージと

サイズは同等です。一部のブラウザでは微妙な違いが表示されますが、これが大きな問題ではありません。すべてのバイトを保存する場合は、最短の定義、つまり0.5EMよりも50％短く、100％短い1EMを選択できます。 em

テキストサイズとページズーム

これは、余分な複雑さが来るところです。ほとんどのブラウザは、ユーザーを許可します：

基本的なテキストサイズを増やすか減少させます（画像サイズは変更されていません）
1. すべてのテキストとグラフィックがそれに応じて変更されるように、
ページからズームインします。 また、テキストのサイズ変更とページスケーリングも許可します。
3. さらに複雑なものを複雑にするために、インターネットエクスプローラーは、フォントサイズがピクセル（PX）で定義されているテキストサイズの要素を許可しません。

あなたがタイポグラフィのバックグラウンドからWebデザインに移行した開発者である場合、ユーザーにこのような多くの力を与えるのは気がかりです。ユーザーの倍率によって設計が200％削除される可能性がありますが、テキストサイズを50％に減らします。そして - いいえ - あなたはそれを止めることはできません。あなたもそれを止めるべきではありません。

cssフォントサイズの推奨

ほとんどの場合、または

が最良の解決策であると一般に考えられています。 Webフォントは、相互に正確にスケーリングされ、ブラウザのテキストのサイズ変更をサポートできます。また、

タグでパーセントフォントサイズを使用することをお勧めします。ウェブサイトを開発するときは、次の提案をすることもお勧めします。

1. テスト前にすべてのブラウザのフォントサイズとページスケーリングをすべてのブラウザのデフォルト値にリセットします（何度か不意い！）
2. さまざまなブラウザで合理的なテキストサイズとページスケーリングの組み合わせを使用して、テキストが読みやすいままであることを確認してみてください。

フォントサイズがあなたに問題を引き起こしたことがありますか？他にヒントはありますか？

cssフォントサイズFAQ（FAQS）

CSSの絶対フォントサイズと相対フォントサイズの違いは何ですか？

CSSでは、フォントサイズは絶対値または相対値を使用して設定できます。絶対値は固定されており、親要素のサイズに応じて変更されません。それらは、ピクセル（PX）、ポンド（PT）、センチメートル（cm）などのユニットで定義されています。一方、相対値は動的であり、親要素のサイズに応じて変化します。それらは、EM、REM、パーセンテージ（％）などのユニットを使用して定義されています。絶対フォントサイズと相対的なフォントサイズの選択は、設計要件とWebページの応答性に依存します。

EMユニットはCSSフォントサイズでどのように機能しますか？

EMユニットは、CSSのフォントサイズに使用されるスケーラブルユニットです。最も近い親要素に比べてフォントサイズがあります。たとえば、親要素のフォントサイズが20pxの場合、「1EM」はその要素の子要素で20pxに等しくなります。フォントサイズが定義されていない場合、デフォルト値は通常16pxであるため、「1EM」は16pxになります。

フォントサイズを設定するためにREMユニットを使用する方法は？

remユニットは「ルートem」を表します。これは、親要素ではなく、ルート要素（HTML）に関連しています。これは、1REMがルート要素のフォントサイズに等しいことを意味します。ルート要素のフォントサイズが16px（ほとんどのブラウザのデフォルトサイズ）の場合、1REMは16pxに等しくなります。

CSSフォントサイズのVWユニットは何ですか？

VWユニットはビューポート幅を表します。これは、1VWがビューポート幅の1％に等しく、ビューポートの幅に関連しています。このユニットを使用すると、画面幅に応じてフォントサイズを調整できるため、レスポンシブデザインのための優れたツールになります。

CSSを使用してフォントサイズを応答する方法は？

フォントサイズを応答するために、EM、REM、VWなどの相対ユニットを使用できます。これらのユニットは、親要素のサイズ、ルート要素のサイズ、またはビューポート幅に応じてフォントサイズを調整します。これにより、フォントサイズは、画面サイズまたは親要素のサイズに基づいて動的に変更できます。

CSSフォントサイズの機能はどのように機能しますか？

CSSのcalc()関数を使用すると、計算を実行してフォントサイズを決定できます。異なるユニットで使用できるため、レスポンシブデザインを作成するための強力なツールになります。たとえば、固定ピクセル値と相対ビューポート値の混合物である

を使用してフォントサイズを設定できます。

CSSにおけるcalc()属性の属性の影響は何ですか？ calc() CSSの

の属性を使用すると、フォントのX-Height（小文字の高さ）を調整できます。これは、Xの高さが保持され、どのフォントが使用されていても読みやすさが一貫していることを保証するため、代替フォントを使用する場合に役立ちます。

CSSフォントサイズでCHユニットを使用する方法は？

使用するフォントのフォント "0"（ゼロ）幅に対するCSSのCHユニットの幅。このユニットは、内部テキストの長さに基づいてボタンの幅を設定するなど、その中に含まれる文字に基づいて要素の幅を設定する場合に役立ちます。

CSSフォントサイズのLHユニットは何ですか？

lhユニットは「ライドの高さ」を表します。要素に対するその列の高さ。このユニットは、デザインに垂直リズムを作成するなど、行の高さに基づいて要素の高さを設定する場合に役立ちます。

CSSフォントサイズでEXユニットを使用する方法は？

現在のフォントのx高さと比較して、CSSのEXユニット。 xの高さは通常、小文字の高さ（「x」など）です。このユニットは、内部テキストに基づいて垂直に整列する要素など、Xの高さに基づいて要素の高さを設定する場合に役立ちます。

以上がCSSフォントサイズ：決定的なフォントサイズのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。