CSS で font-optical-sizing プロパティを使用するにはどうすればよいですか?

font-optical-sizing プロパティの使用方法を学ぶ前に、まず CSS の font プロパティと、font-optical-sizing が別個に必要な理由を確認する必要があります。財産。

Web ページ上のテキストのスタイルは、CSS の font プロパティ によって制御されます。これは、他の多くのプロパティの短縮形です。システム フォントを要素に適用したり、他の CSS プロパティに異なる値を設定したりするために使用できます。

フォントのプロパティ

このプロパティはすべての要素に適用され、本質的に継承可能です。つまり、特に指定がない限り、子要素のフォントは親要素のフォントと同じになります。

フォント短縮プロパティを構成するプロパティは次のとおりです -

• Font-family - テキストに適用されるフォント ファミリを指定します。オプションで、左から右に優先順位を付けたファミリのリストを指定できます。

• フォント サイズ -フォントまたはテキストのサイズを制御するために使用されます。

• フォントストレッチ -このプロパティを使用して、通常の文字よりも狭いまたは広い文字面を設定できます。

• フォント スタイル -このプロパティは、フォントを太字、斜体、下線、または取り消し線のテキストで表示するかどうかを指定します

• Font-variant - フォント バリアントを制御し、合字に異なる値を設定します。

• Font-weight - このプロパティは、テキストの太字の表示を設定します。

• #行の高さ- テキストの行間の距離を設定するために使用されます。

これらのプロパティはすべて、フォント短縮プロパティの一部として使用されるか、単独で使用されるかに関係なく、初期値を持っています。ほとんどの場合、初期値は「標準」、フォント サイズのデフォルト値は「中」、フォント ファミリのデフォルト値はユーザーのシステムによって異なります。

＃＃＃例＃＃＃

次は、font 属性を使用してテキストのスタイルを設定する例です。

リーリー

フォントの光学サイズとは何ですか?

CSS には、生成されたテキストがさまざまな画面サイズに最適化されるかどうかを決定する

font-optical-sizing

プロパティがあります。ブラウザはフォント グリフのアウトラインを変更して、さまざまなサイズで読みやすくすることができます。

フォントがフォントの光学式サイズ変更をサポートしている場合、それは私たちにとって大きな利点です。このようにして、テキストがユーザーが使用している画面に常に適応するようにします。ほとんどの可変フォント ファミリはこのプロパティをサポートしています。フォントに光学式サイズ変更軸がある場合、光学式サイズ変更は自動的に有効になります。フォントバリアント設定の opsz 値を使用して、光学サイズの変更軸を表します。

光学スケーリングを使用すると、通常、小さなフォント サイズは太いストロークと大きなセリフで表示され、大きなテキストは通常​​、より繊細で太く細いストロークで表示されます。

このプロパティを指定する場合、次の値を使用できます -

None
• -光学的に変更されたテキストが必要ない場合は、この値を使用します。

Auto
• - 画面サイズに応じてグリフの形状を調整する必要がある場合、ブラウザはこの値を使用します。
  さらに、この属性の値としてグローバル値 (inherit、initial、unset) を使用することもできます。

デフォルトでは、このプロパティの初期値は auto です。これはすべての要素に適用され、::first-letter 属性と ::first-line 属性も含まれます。これは継承可能な値であり、ブラウザーが指定した値が計算値として使用されます。個別のアニメーション タイプがあります。

＃＃＃例＃＃＃

この属性の値として値 auto を使用する例を以下に示します。

リーリー ＃＃＃例＃＃＃

この例では、プロパティの値として継承を使用します。これは、CSS で使用できる 3 つのグローバル プロパティの 1 つです。

リーリー ＃＃＃結論は＃＃＃

要約すると、CSS の font-optical-sizing プロパティは、さまざまなデバイスや解像度でテキストの見栄えを良くする優れた方法です。用途に応じてフォントのサイズを調整できるため、読みやすさが向上し、さまざまな画面間でより一貫したデザインを作成できます。この機能を利用することで、デザイナーは、画面サイズごとに設定を手動で調整することなく、どのデバイスで表示されてもレイアウトが美しく見えるようにすることができます。

以上がCSS で font-optical-sizing プロパティを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。