CSS テキスト プロパティのガイド: font-weight と text-transform

CSS テキスト属性ガイド: font-weight と text-transform

Web ページを開発するとき、多くの場合、ページ デザインの要件に合わせてテキストのスタイルを設定する必要があります。 。その中でも、フォントの太さとテキスト変換は、よく使用される 2 つのテキスト スタイル属性です。この記事では、CSS の font-weight プロパティと text-transform プロパティを調べ、具体的なコード例を示します。

1. font-weight プロパティ
   font-weight プロパティは、フォントの太さを設定するために使用されます。 CSSでは以下の値が利用可能です。

   • normal: フォント通常(デフォルト値)
   • bold: フォントボールド
   • bolder: 1レベル以上厚いです (厚いレベルがない場合は、最も厚いレベルが使用されます)
   • 軽い: 前のレベルより細かいです (細かいレベルがない場合は、最も薄いレベルが使用されます)
   • 100 、200、300、400、500、600、700、800、900: 相対レベルに基づいてフォントの太さを設定します。

   これは、font-weight プロパティを使用して太さを設定する方法を示すサンプル コードです。フォントの:

   p.normal {
     font-weight: normal;
   }
   
   p.bold {
     font-weight: bold;
   }
   
   p.bolder {
     font-weight: bolder;
   }
   
   p.lighter {
     font-weight: lighter;
   }
   
   p.custom {
     font-weight: 600;
   }

2. text-transform プロパティ
   text-transform プロパティは、テキストの変換効果を設定するために使用されます。 CSS では、次の値が利用可能です:

   • none: 変換効果なし (デフォルト値)
   • capitalize: 最初の文字を大文字にします
   • uppercase: all大文字
   • 小文字: すべて小文字
   • inherit: 親要素の text-transform 属性値を継承

   テキストの使用方法を示すサンプル コードをいくつか示します。テキスト変換効果を設定する -transform 属性:

   p.none {
     text-transform: none;
   }
   
   p.capitalize {
     text-transform: capitalize;
   }
   
   p.uppercase {
     text-transform: uppercase;
   }
   
   p.lowercase {
     text-transform: lowercase;
   }
   
   p.inherit {
     text-transform: inherit;
   }

   text-transform 属性はテキストの表示効果にのみ影響し、実際の大文字と小文字は変更されないことに注意してください。

概要:
フォントの太さとテキスト変換は、Web ページを開発するときに一般的に使用されるテキスト スタイル属性です。 font-weight プロパティと text-transform プロパティを使用すると、テキストの太さと大文字と小文字の変換を簡単に設定できます。実際の開発では、さまざまなデザイン要件やテキストの内容に応じてこれら 2 つの属性を柔軟に使用して、ページ上でテキストが最適な効果を発揮できるようにすることができます。

この記事が、font-weight プロパティと text-transform プロパティの理解と適用に役立つことを願っています。 Web ページを作成するときに、より美しく読みやすいテキスト スタイルを作成しましょう。

以上がCSS テキスト プロパティのガイド: font-weight と text-transformの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。