CSS のフォント サイズの背後にある本当の話: それはアセンダーとディセンダーの高さだけですか?

CSS での文字の実際の高さの決定: 真のフォント サイズを解明する

フォント サイズを設定するという一般的な前提にもかかわらず、 CSS はアセンダの高さに直接対応します (「h」や「h」などの特定の文字の上部) 'l') やディセンダー ('g' や 'y' などの文字の下部) を使用すると、実際の測定はさらに複雑になる可能性があります。

歴史的展望: The Em

歴史的に、「em」は金属に刻まれた個々の文字のブロックサイズを指しました。通常、大文字の「M」が最も大きなスペースを占めるため、そのサイズによって全体の「em」サイズが決まります。現在、フォント開発者は物理的な制約なしにフォントを設計し、「em」を仮想概念としています。

標準: OpenType および TrueType

OpenType フォントでは、em サイズは次のとおりです。 1000 単位に設定されますが、TrueType フォントでは通常 1024 または 2048 です。理想的には、フォント サイズは「em」単位を使用して定義する必要があります。これは、ピクセルの高さではなく、フォントの x の高さを指します。

単位変換: ポイント、ピカ、PPI

「ポイント」は、タイポグラフィーで一般的に使用される測定値です。規則に応じて、1 ポイントの範囲は 0.188 mm ～ 0.4 mm になります。 「ピカ」は 12 ポイントに相当する古い単位です。 「ppi」（1 インチあたりのピクセル数）は、画面解像度によって大きく異なります。

ブラウザ レンダリング: 実装間の差異

標準の存在にもかかわらず、実際のサイズはフォント グリフは、フォント開発者がグリフをどのように設計したか、およびさまざまなブラウザでどのようにレンダリングされるかによって異なります。たとえば、Apple Zapfino スクリプト フォントは、小文字を読みやすくするために拡大されました。

フォント開発ツール: 基礎の探求

フォント サイズをより深く理解するには、FontForge などの無料のフォント開発ツールの使用を検討してください。これらのツールを使用すると、独自のフォントを作成し、さまざまなサイズ変更テクニックを試すことができます。

結論

CSS の文字の実際の高さを理解するには、歴史的な慣例を理解する必要があります。フォント標準、およびブラウザー固有のレンダリングの違い。上記のリソースを活用することで、Web デザインのこの基礎的な主題についてより包括的な知識を得ることができます。

以上がCSS のフォント サイズの背後にある本当の話: それはアセンダーとディセンダーの高さだけですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。