CSS でのタイポグラフィーとフォントスタイル-CSSチュートリアル-php.cn

CSS でのタイポグラフィーとフォントスタイル

WBOY

リリース： 2024-09-03 13:44:46

オリジナル

675 人が閲覧しました

Typography and Font Styling in CSS

レクチャー 4: CSS でのタイポグラフィーとフォントスタイル

この講義では、CSS を使用してテキストのスタイルを設定する方法を学びます。タイポグラフィは、読みやすさ、ユーザーエクスペリエンス、全体的な美しさに影響を与える Web デザインの重要な側面です。この講義を終えるまでに、さまざまなフォントスタイルを適用し、Web サイト上のテキストの外観を制御する方法がわかるようになります。

Web フォントを理解する

Web フォントを使用すると、Web サイトでさまざまな書体を使用できます。デバイスにプレインストールされているシステムフォントを使用することも、Google Fonts などのサービスを使用してカスタムフォントをインポートすることもできます。

1.システムフォント

システムフォントはほとんどのデバイスにプレインストールされているため信頼性がありますが、デザインのオプションが制限されます。

例:

  body {
    font-family: Arial, sans-serif;
  }

ログイン後にコピー

2. Google フォント

Google Fonts では、Web サイトに簡単に統合できる幅広い Web フォントを提供しています。

例:

まず、HTML にフォントリンクを含めます。

 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

ログイン後にコピー

次に、CSS にフォントを適用します。
```
 body {
   font-family: 'Roboto', sans-serif;
 }
```
ログイン後にコピー

CSS のフォントプロパティ

CSS には、フォントサイズ、太さ、スタイルなど、フォントのスタイルを設定するためのさまざまなプロパティが用意されています。

1.フォントサイズ

font-size プロパティを使用してテキストのサイズを制御できます。

例:

  h1 {
    font-size: 36px;
  }
  p {
    font-size: 16px;
  }

ログイン後にコピー

2.フォントの太さ

font-weight プロパティを使用すると、テキストの太さを設定できます。

例:

  h1 {
    font-weight: bold; /* Or use numeric values like 700 */
  }

ログイン後にコピー

3.フォントスタイル

font-style プロパティを使用すると、テキストを斜体にすることができます。

例:

  em {
    font-style: italic;
  }

ログイン後にコピー

4.フォントのバリエーション

テキストを小文字で表示するには、font-variant を使用します。

例:

  p.caps {
    font-variant: small-caps;
  }

ログイン後にコピー

5.行の高さ

line-height プロパティは、テキストの行間のスペースを制御します。

例:

  p {
    line-height: 1.5;
  }

ログイン後にコピー

6.テキストの配置

text-align プロパティは、要素内のテキストの水平方向の配置を制御します。

例:

  h1 {
    text-align: center;
  }

ログイン後にコピー

7.文字装飾

text-decoration プロパティを使用すると、テキストに下線、上線、取り消し線を追加できます。

例:

  a {
    text-decoration: underline;
  }

ログイン後にコピー

8.テキストシャドウ

text-shadow プロパティを使用して、テキストにシャドウ効果を追加できます。

例:

  h2 {
    text-shadow: 2px 2px 5px gray;
  }

ログイン後にコピー

実践例:

これらのプロパティを組み合わせて、タイポグラフィーに重点を置いて Web ページのスタイルを設定してみましょう。

HTML:

<div class="content">
  <h1>Welcome to Our Blog</h1>
  <h2>Latest Updates</h2>
  <p class="intro">Stay updated with the latest trends in web development, design, and more.</p>
  <p>Explore articles, tutorials, and resources to help you master the art of web design.</p>
</div>

ログイン後にコピー

CSS:

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Heading Styles */
h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px #aaa;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 20px;
}

/* Paragraph Styles */
p {
  font-size: 18px;
  margin-bottom: 15px;
}

.intro {
  font-style: italic;
  font-variant: small-caps;
  text-align: justify;
}

/* Centering the content */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

ログイン後にコピー

この例では: