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

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つの方法

推薦する

JavaScript はパスワードボックスの入力検証を実装します

サーバーの負荷を軽減するために、ユーザーが入力するときにフロントエンドページで簡単な検証を実行する必...

Git サーバーを使用してデバッグ ブランチを表示し、修正する方法を 1 日 1 分で学習します。

デバッグブランチプロジェクトの通常の開発中に、以前にリリースされたバージョンにバグがある場合がありま...

JavaScript初心者がよく犯す間違い

目次序文undefined と null の混同紛らわしい数値の加算と文字列の連結戻り文の改行の問題...

nginx ベースのブラウザネゴシエーションキャッシュプロセスの詳細な説明

この記事は主に、nginx に基づいてブラウザネゴシエーションキャッシュを設定する詳細なプロセスを紹...

ウェブデザインレイアウトの理解

<br />矛盾が生じます。私たちのような小さな工房では、デザインとレイアウトは基本的に...

HTMLバージョン宣言DOCTYPEタグ

通常のウェブサイトのソースコードを開くと、ソースコードは<!DOCTYPE htmlで始まる必...

JS で if 判定をスムーズに行う方法

目次序文コードの実装アイデア 1アイデア2要約する参照ドキュメント序文プロジェクト内の小さな要件ポイ...

HTMLは入力完了を検出する機能を実装する

入力が進行中かどうかを検出するには、「onInput(event)」を使用しますコンテンツが変更され...

オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析

同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討でき...

CSSは半透明の境界と複数の境界のシーン分析を実現します

シナリオ 1:半透明の境界線を実現するには: CSS スタイルのデフォルトの動作により、背景色はコン...

Linux で MySQL 5.7.19 をアンインストールする方法

1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...

非常に詳細な基本的なJavaScript構文ルール

目次01 JavaScript(略称:js) js は 3 つの部分に分かれています。 JavaSc...

VirtualBox+Ubuntu16でKubernetesクラスタを構築する実装

目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...

React における useEffect と useLayoutEffect の違い

目次前提条件使用効果コミット前ミューテーション効果コミットミューテーション効果コミットレイアウト効果...

Win10 に Tomcat サーバーをインストールし、環境変数を構成する詳細なチュートリアル (画像とテキスト)

目次JDKをダウンロードしてインストールするTomcat 圧縮パッケージをダウンロードTomcatの...