CSSでよく使われるフォントスタイルを設定することで様々なフォントの変更が可能（例詳細説明）

CSS フォントプロパティは、テキストのフォントファミリ、サイズ、太字、スタイル (斜体など)、およびバリアント (小文字など) を定義します。font-family はフォントを制御します。各コンピュータシステムにインストールされているフォントは異なるため、基本フォントは Heiti、Songti、および Microsoft YaHei の 3 つです。font-family は通常、「Heiti」、「Songti」、「Microsoft YaHei」のように記述されます。

font-size はフォントサイズを制御します。フォントサイズは幅を設定することで設定します。コンピュータシステムでは、フォントの高さはデフォルトで 16px に設定されているため、フォントサイズは 16px 未満にしないでください。1em=16px; font-weight: bold;/*フォントの太さは通常 100 ～ 900 で、よく使用されるのは lighter、normal、bold です*/font-style に関しては、デフォルトは normal で、これは標準を意味します。font-style: italic; を設定すると、<em></em> と同じ効果があります。単語間のスペースに使用される line-height が高さと等しい場合は、垂直方向に中央揃えされます。

通常、フォントの省略形は次のようになります: font: style weight size/line-height font-family /*必須の 2 つは size と font-family*/

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>よく使われる CSS フォント スタイルの複数の変換</title>
    <スタイル>
        div{
            フォント ファミリ: 'Microsoft YaHei';/*Microsoft YaHei*/
            /* フォント ファミリ: 'Lucida Sans'、'Lucida Sans Regular'、'Lucida Grande'、'Lucida Sans Unicode'、Geneva、Verdana、sans-serif; */
            /*フォントに二重引用符または一重引用符を追加します。フォントが複数ある場合は、カンマで区切ります*/
            色:#f90;
            font-size: 24px;/*フォントサイズを制御*/
            font-weight: bold;/*フォントの太さを制御: lighter (軽量)、normal (通常)、bold*/
            フォントスタイル: italic;/*emと同じ*/
            行の高さ: 30px;
        }
        /*フォント フォント略語: フォント: スタイル 太さ サイズ/行の高さ フォントファミリー*/
        /*必須の 2 つはサイズとフォント ファミリです*/
        p{  
            フォント: 24px/1.5em 'Lucida Sans'、'Lucida Sans Regular'、'Lucida Grande'、'Lucida Sans Unicode'、Geneva、Verdana、サンセリフ;
            letter-spacing: 1px;/*英語の文字間隔*/
            word-spacing: 10px;/*英語の単語間隔*/
        }
        P::最初の文字{
            テキスト変換: 大文字にする;
        }/*最初の文字::最初の文字*/
        p::最初の行{
            色：赤;
        }/*最初の行::最初の行*/
    </スタイル>
</head>
<本文>
    <div>この世界ではテクノロジーが王様です。青田山の頂上からの眺めが最高かどうか知りたいなら、尋ねなければなりません。テクノロジー...
        テクノロジーが王様であるこの世界で、青田山の頂上からの景色が最高かどうか知りたいなら、テクノロジーが王様であるこの世界で、青田山の頂上からの景色が最高かどうか知りたいなら、テクノロジーが王様であるこの世界で、青田山の頂上からの景色が最高かどうか知りたいなら、
        青田山の頂上からの景色は最高かと聞きたい。テクノロジーが王様のこの世界で、青田山の頂上からの景色は最高かと聞きたい。</div>
    <p>テクノロジーは王の世界です。青天山の頂上の景色はテクノロジーの王様ですか？ 
        青天峰の景色は技術の王様なのかと問いたい。技術が世界の王様なら、 
        青田山の頂上の景色は天下の王様ですか？景色は良いですか？</p>
</本文>
</html>

要約する

以上がエディターで紹介した、よく使われるCSSスタイルにおけるフォント設定の各種変更です。皆様のお役に立てれば幸いです。123WORDPRESS.COMウェブサイトをご愛顧いただき誠にありがとうございます。

<<: JavaScript を使用したコマンドラインアプリケーションの構築

>>: 選択タグ内のオプションをクリアする3つの方法