見栄えの良い背景や色に加えて、フォント設定も Web デザインの重要な部分です。適切なフォントはページをより美しくするだけでなく、ユーザー エクスペリエンスも向上させます。 CSS は、フォントの変更、フォントのサイズと太さの制御など、テキストのフォント スタイルを設定するための一連のプロパティを提供します。
上記の CSS プロパティを学習すると、HTML 内のテキストのフォント、サイズ、スタイル、斜体、太字などを設定できます。
1.フォントファミリー
font-family 属性は要素のフォントを設定するために使用されます。フォントは Song、Kai などです。
font-family 属性を使用すると、複数のフォントを同時に宣言でき、フォントはカンマで区切られます。フォント呼び出しの原則に従って、最初のフォントが最初に呼び出され、どちらも見つからない場合は、デフォルトのフォントが呼び出されます。
例:
たとえば、次の <p> タグ内のテキストのフォントを設定します。
<p>dotcpp プログラミング</p>
タグ セレクターを使用して、それを font-family 属性に設定できます。
p{font-family:'TimesNewRoman','sans-serif',宋体,楷体;}
フォントを宣言するときは、英語フォントと中国語フォントを別々に宣言する必要があり、英語フォントの宣言は中国語フォントの前に行う必要があります。ほとんどの中国語フォントには英語の文字が含まれていますが、あまり美しくありませんが、英語フォントには中国語の文字が含まれていないためです。したがって、英語の表示に中国語フォントを使用したくない場合は、最初に英語フォントを宣言することを忘れないようにする必要があります。最初に宣言されたものが最初に呼び出されます。
一般的に使用される英語フォント: Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia など。
一般的に使用される中国語フォント: SimSun、SimHei、Microsoft YaHei、FangSong、KaiTi など。
2.フォントスタイル
font-style はフォント スタイルを設定します。フォントを斜体、斜体、または標準フォントに設定できます。イタリック フォントは通常、フォント ファミリ内の個別のフォントとして定義されます。
この属の一般的な属性値は次のとおりです。
3.フォントの太さ
font-weight 属性は、表示される要素のテキストで使用されるフォントの太さを設定します。
このプロパティの一般的なプロパティ値は次のとおりです。
4.フォントサイズ
font-size 属性は、フォントのサイズを設定するために使用されます。一般的に使用される単位は px (ピクセル) です。
px はピクセルの略語で、デジタル表示デバイス上に表示および表現できるデジタル画像またはグラフィックスの最小単位です。ピクセルはデジタル グラフィックスの基本的な論理単位であり、ピクセルは画像要素とも呼ばれます。
5. フォントバリアント
font-variant 属性は、テキスト内の英小文字を小文字に変換できます (変換された大文字は、変換前の小文字とサイズが似ているため、小文字と呼ばれます)。 font-variant 属性のオプションの値は次のとおりです。
6.フォント
font 属性は、1 つの宣言ですべてのフォント属性を設定するために使用され、各属性はスペースで区切られます。つまり、上記の属性を包括した略称属性です。
font 属性を使用してフォント スタイルを設定する場合、設定順序は font-style、font-variant、font-weight、font-size/line-height、font-family になります。値を設定する必要はなく、設定されていないプロパティではデフォルト値が使用されます。