CSS フォントプロパティ選択ガイド: font-family と font-size の正しい使用-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS フォントプロパティ選択ガイド: font-family と font-size の正しい使用

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 20, 2023 am 10:09 AM

フォントのプロパティ（フォント）フォントファミリーフォントサイズ

CSS 字体属性选择指南：font-family 和 font-size 的正确使用

CSS フォント属性選択ガイド: font-family と font-size を正しく使用するには、特定のコード例が必要です

はじめに:

Web デザインでは、フォントの選択は重要な要素です。適切なフォントを使用すると、Web ページの読みやすさと美しさを向上させることができます。 CSS では、font-family プロパティと font-size プロパティを通じてフォントのスタイルとサイズを制御できます。ただし、これら 2 つのプロパティを正しく使用することは困難な作業です。この記事では、正しいフォントスタイルとフォントサイズを選択する方法と、いくつかの具体的なコード例を示します。

1. フォントファミリーのフォントスタイル選択ガイド:

ユニバーサルフォントファミリーを使用する:

フォントスタイルを選択するときは、次のことを優先する必要があります。ユニバーサルフォントファミリを使用します。フォントファミリ。「セリフ」「サンセリフ」「等幅」など。これらのフォントファミリは、フォントタイプの全体的なスタイルを定義し、さまざまなオペレーティングシステムやデバイス上で一貫した効果を表示できます。一般的な汎用フォントファミリをいくつか示します。

body {
  font-family: serif;
}

h1 {
  font-family: sans-serif;
}

code {
  font-family: monospace;
}

ログイン後にコピー

特定のフォント名を指定します。

特定のフォントスタイルを使用する必要がある場合は、フォントの名前。システムにデフォルトでインストールされているフォントを選択するようにしてください。フォントがユーザーのシステムに存在しない場合、ブラウザは代わりにフォールバックフォントを使用します。フォント名を指定する例を次に示します:

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

ログイン後にコピー

カスタムフォントの使用:

Web ページでカスタムフォントを使用したい場合は、次のように指定します。 @ font-face フォントファイルをロードするためのルール。フォントファイルをサーバー上に配置し、相対パスまたは絶対パスを使用して参照します。以下はカスタムフォントのロード例です:

@font-face {
  font-family: "MyFont";
  src: url("myfont.ttf");
}

h1 {
  font-family: "MyFont", sans-serif;
}

ログイン後にコピー

2. フォントサイズフォントサイズ選択ガイド:

相対単位を使用します:

フォントサイズを設定するときは、相対単位を使用することをお勧めします。相対単位は、ユーザーのデバイスと設定に基づいてフォントサイズを自動的に調整します。一般的な相対単位は次のとおりです。

em: 親要素のフォントサイズに対する相対値
rem: 親要素のフォントサイズに対する相対値ルート要素 (通常は <html> 要素) フォントサイズ
%: 親要素に対する相対的なパーセンテージ

body {
  font-size: 1em;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 120%;
}

ログイン後にコピー

絶対単位を使用する:

場合によっては、固定フォントサイズを使用したい場合があります。この場合、px、pt、rem などの絶対単位を使用できます。絶対単位を使用した例を次に示します。

h1 {
  font-size: 24px;
}

p {
  font-size: 16pt;
}

ログイン後にコピー

レスポンシブフォントサイズ:

さまざまな画面サイズやデバイスで最適なフォントサイズを実現するには、メディアクエリとプロパティを使用します。 CSSによる補間。たとえば、フォントサイズは画面の幅に基づいて自動的に調整できます。レスポンシブフォントサイズの例を次に示します。

h1 {
  font-size: 24px;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 18px;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 16px;
  }
}

ログイン後にコピー

結論:

フォントスタイルとフォントサイズを適切に選択することは、Web デザインにおいて重要な作業です。適切なフォントスタイルと相対単位を使用することで、Web ページの読みやすさと美しさを確保できます。同時に、フォント名を指定してカスタムフォントを読み込むことで、よりパーソナライズされたユニークなデザイン効果を実現できます。この記事で説明するガイドラインと例が、フォントスタイルとフォントサイズを正しく選択して使用するのに役立つことを願っています。

以上がCSS フォントプロパティ選択ガイド: font-family と font-size の正しい使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。