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 を使用したコマンドライン アプリケーションの構築
サーバーの負荷を軽減するために、ユーザーが入力するときにフロントエンドページで簡単な検証を実行する必...
デバッグブランチプロジェクトの通常の開発中に、以前にリリースされたバージョンにバグがある場合がありま...
目次序文undefined と null の混同紛らわしい数値の加算と文字列の連結戻り文の改行の問題...
この記事は主に、nginx に基づいてブラウザネゴシエーションキャッシュを設定する詳細なプロセスを紹...
<br />矛盾が生じます。私たちのような小さな工房では、デザインとレイアウトは基本的に...
通常のウェブサイトのソースコードを開くと、ソースコードは<!DOCTYPE htmlで始まる必...
目次序文コードの実装アイデア 1アイデア2要約する参照ドキュメント序文プロジェクト内の小さな要件ポイ...
入力が進行中かどうかを検出するには、「onInput(event)」を使用しますコンテンツが変更され...
同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討でき...
シナリオ 1:半透明の境界線を実現するには: CSS スタイルのデフォルトの動作により、背景色はコン...
1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...
目次01 JavaScript(略称:js) js は 3 つの部分に分かれています。 JavaSc...
目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...
目次前提条件使用効果コミット前ミューテーション効果コミットミューテーション効果コミットレイアウト効果...
目次JDKをダウンロードしてインストールするTomcat 圧縮パッケージをダウンロードTomcatの...