CSSはページフォントを設定します

CSS は、Web ページをより美しく、読みやすくするためにスタイルを設定するために使用される言語です。その中でも、フォント設定は CSS の最も一般的に使用される重要な部分の 1 つです。適切なフォント設定により Web サイトの読みやすさと視覚効果が向上するためです。この記事では、CSS を使用してページのフォントを設定する方法を説明します。

1. フォント ファミリーとフォント

CSS では、フォント ファミリー (font-family) は Web サイトで使用されるフォント ファミリーを指します。たとえば、フォント ファミリを「Arial、sans-serif」に設定できます。これは、Arial フォントがユーザーのコンピュータにインストールされていない場合、CSS はシステムのデフォルトのサンセリフ フォントを使用しようとすることを意味します。

フォント (フォント) は、フォント シリーズ、フォント サイズ、フォントの太さ、フォント スタイル (斜体など) など、フォントの特定の属性を指します。一般的に使用される CSS フォント プロパティの一部を以下に示します。

1. font-family: フォント名またはフォント ファミリ。
2. font-size: フォント サイズ。px、em、rem 単位または相対サイズのパーセンテージを使用できます。
3. font-weight: フォントの太さ。標準 (デフォルト)、太字、または数値 (100 ～ 900) を指定できます。
4. font-style: フォント スタイル。標準 (デフォルト)、斜体、または斜体にすることができます。

2. ページフォントの設定方法

CSS では、次の 3 つの方法でフォントを設定します。カスタマイズをインポートする面 フォント:

1. @font-face {
font-family:custom-font;

src: url('path/to/font.woff2') format( 'woff2') ;

}

body {
フォントファミリー: カスタムフォント、サンセリフ;

フォントサイズ: 16px;

}

この例では、「custom-font」は定義したフォント ファミリであり、パス「path/to/font.woff2」を持つフォント ファイルを指します。このフォントは body 要素に適用され、デフォルトのフォントはサンセリフに設定されます。

Google Fonts を使用する:

2. Google Fonts は、何百ものフォントから選択できる無料のオンライン フォント ライブラリです。 Google Fontsを使用するには、HTMLドキュメントのheadセクションに次のコードを追加します:

次に、要素にフォントを適用します:

body {

font-family: 'Open Sans', sans-serif;

font-size: 16px ;

}


システムのデフォルト フォントを使用する:

3. ページでシステムのデフォルト フォントを使用する場合は、次のコードを使用できます:

body {

font-family: -apple-system、BlinkMacSystemFont、「Segoe UI」、Roboto、Oxygen-Sans、Ubuntu、Cantarell、「Helvetica Neue」、sans-serif;

font-size : 16px;

}

システムのデフォルト フォントは読みやすい傾向にあるため、これを選択することをお勧めします。

3. フォント サイズと行の高さを調整する

フォント サイズと行の高さは、読みやすさに影響を与える 2 つの要素です。 CSS では、次のコードを使用してフォント サイズと行の高さを調整できます:

body {

font-size: 18px;

line-height: 1.6;

}

このうち、行の高さはフォントサイズに対する行の高さの比率を指し、一般的には1.4～1.6が適切で、ページレイアウトが美しく読みやすくなります。

4. フォントの太さとスタイル

フォントの太さとスタイルも、フォントの読みやすさと視覚効果に影響を与える可能性があります。 CSS では、次のコードを使用してフォントの太さ、スタイル、またはその両方を変更できます。 ## フォント スタイル: イタリック;

}

h1 {

フォントの太さ: ボールド;

フォント スタイル: イタリック;
}

5,結論

適切なフォント設定により、Web サイトの読みやすさ、視覚効果、ユーザー エクスペリエンスを向上させることができます。このアプリケーションでは、Web サイトのテーマや対象ユーザーに応じて、適切なフォント ファミリー、フォント サイズ、太さ、スタイル、行の高さを選択できます。これにより、Web サイトがより美しく、読みやすくなり、ユーザーにより良いコンテンツが提供されます。読書体験。

以上がCSSはページフォントを設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。