CSSはページフォントを設定します-フロントエンドQ&A-php.cn

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

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

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

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

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

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

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

@font-face {

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

}

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

フォントサイズ: 16px;

}

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

Google Fonts を使用する:

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

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

body {

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

font-size: 16px ;

}

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

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

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 サイトの他の関連記事を参照してください。