logo
Helpful resources ▼
  Nuget   Pricing   Buy

CSSフォント | Aspose.Font for .NET

この記事の目的は、HTML/CSSフォントとそのプロパティについて説明し、コード例を用いてそれらの操作方法を示すことです。テキストを太字（太字またはセミボールド）にする方法、CSSでのフォントサイズやフォントファミリーの変更方法などを学びます。

また、CSSフォントプロパティと、フォントプロパティの一般的な分類の違いについても説明します。これらの基本については、 フォントとは？の記事で詳しく述べています。

CSSフォント

CSSにおけるフォントは、グリフの視覚的表現を含むリソースです。簡単に言えば、グリフとそのコードを対応させる情報を保持しています。

フォントリソースは、ブラウザが動作するデバイスにローカルで設定できます。このようなフォント（例： Montserrat.ttf ファイルなど）の場合、記述情報はフォントリソースから直接取得できます。Webフォントの場合、そのような情報はフォントリソースへのリンクに付随しています。

CSSフォントプロパティ

CSSは、Webページ上のフォントの外観と動作を制御するために、いくつかのフォントプロパティを提供しています。これらは個別に、または組み合わせて使用することで、CSSで目的のタイポグラフィ効果を実現できます。すべてのブラウザがすべてのプロパティをサポートしているわけではないため、これらのプロパティを使用する際にはクロスブラウザの互換性を考慮することが不可欠です。

代表的（最もよく使用される）なプロパティをいくつか見てみましょう：

CSSフォントファミリー (font-family)

デザインが共通しているフォントは、通常、フォントファミリーとしてグループ化されます。ファミリー内では、グリフの幅、傾斜、または太さが異なる場合があります。

CSSの font-family プロパティは、書体の選択に使用されます。ユーザーのコンピュータに特定のフォントがインストールされているかどうかを予測するのは難しいため、1つのタイプのフォントに対して複数のバリエーション（候補）を指定しておくのが最善です。この場合、ブラウザは指定されたフォントを1つずつ順に試行し、最初に見つかった使用可能なフォントを適用します。

font-family プロパティは継承されます。

CSSの font-family には、以下の値を指定できます：

使用例:

以下の例では、対応するパラメータが設定されています：

プロパティテキスト 1 の値テキスト 2 の値テキスト 3 の値
font-family:Lobster, Pacifico, cursive;Audiowide, fantasy;Courier, monospace;

構文：

 1// テキスト 1
 2.text1 {
 3    font-family: Lobster, cursive;
 4}
 5// テキスト 2
 6.text2 {
 7    font-family: Audiowide, fantasy;
 8}
 9// テキスト 3
10.text3 {
11    font-family: Courier, monospace;
12}

適用の結果は以下のようになります（<body> 内の3つのテキストすべてでフォントサイズと色が同じに設定されていることに注意してください）：

さまざまなフォントファミリーCSSでレンダリングされたテキスト

CSSフォントの太さ (font-weight)

font-weight プロパティは、フォントの線の太さを制御します。

font-weight プロパティは継承されます。

HTML/CSSの font-weight には、以下の値を指定できます：

使用例:

以下の font-weight パラメータを使用してテキストをレンダリングしてみましょう：

プロパティテキスト 1 の値テキスト 2 の値テキスト 3 の値
font-weight:900;500;200;

構文：

 1// テキスト 1
 2.text1 {
 3    font-weight: 900;
 4}
 5// テキスト 2
 6.text2 {
 7    font-weight: 500;
 8}
 9// テキスト 3
10.text3 {
11    font-weight: 200;
12}

適用の結果は以下のようになります（<body> 内の3つのテキストすべてでフォントサイズと色が同じに設定されていることに注意してください）。また、使用するフォント自体に必要な太さのバリエーションが含まれている必要があることに注意してください。ほとんどのフォントは normal と bold（または semi-bold）の太さのみが提供されています。この例で使用されている Segoe UI フォントには十分なバリエーションがあるため、設定されたすべての値でテキストがレンダリングされています。

異なるフォントウェイトCSSでレンダリングされたテキスト

CSSフォントの伸縮 (font-stretch)

font-stretch プロパティを使用すると、フォントファミリーから通常の、凝縮（コンデンス）された、または拡張された書体を選択できます。このプロパティもすべてのフォントで機能するわけではありません。ファミリー内に伸縮バリエーションを持つ書体が含まれている、特別に設計されたフォントのみがこのプロパティを反映できます。

font-stretch プロパティは継承されます。

CSSの font-stretch には、以下の値を指定できます：

使用例:

プロパティテキスト 1 の値テキスト 2 の値テキスト 3 の値
font-stretch:condensed;normal;expanded;

構文：

 1// テキスト 1
 2.text1 {
 3    font-stretch: condensed;
 4}
 5// テキスト 2
 6.text2 {
 7    font-stretch: normal;
 8}
 9// テキスト 3
10.text3 {
11    font-stretch: expanded;
12}

適用の結果は以下のようになります：

さまざまなフォント伸縮CSSでレンダリングされたテキスト

CSSフォントスタイル (font-style)

このプロパティはフォントの傾斜を制御します。

font-style プロパティは継承されます。

HTML/CSSの font-style には、以下の値を指定できます：

使用例:

プロパティテキスト 1 の値テキスト 2 の値テキスト 3 の値
font-style:normal;italic;oblique;

構文：

 1// テキスト 1
 2.text1 {
 3    font-style: normal;
 4}
 5// テキスト 2
 6.text2 {
 7    font-style: italic;
 8}
 9// テキスト 3
10.text3 {
11    font-style: oblique;
12}

適用の結果は以下のようになります：

さまざまなフォントスタイルCSSでレンダリングされたテキスト

italic と oblique の結果が同じように見えることに気づいたかもしれません。これは、 oblique 値はフォント自体が斜体用の書体を持っている場合にのみ有効であり、使用されているフォントにそれがない場合はブラウザがイタリックに近い傾斜を擬似的に適用するためです。

CSSフォントサイズ (font-size)

このプロパティはフォントのグリフの高さを設定します。

font-size プロパティは継承されます。

CSSの font-size には、以下の値を指定できます：

使用例:

プロパティテキスト 1 の値テキスト 2 の値テキスト 3 の値
font-size:7vw;70px;2em;

構文：

 1// テキスト 1
 2.text1 {
 3    font-size: 7vw;
 4}
 5// テキスト 2
 6.text2 {
 7    font-size: 70px;
 8}
 9// テキスト 3
10.text3 {
11    font-size: 2em;
12}

適用の結果は以下のようになります：

さまざまなフォントサイズCSSでレンダリングされたテキスト

CSSフォント一括指定プロパティ (font)

CSSの font プロパティは、コードを短くするために使用されます。これを使用すると、複数のフォント関連プロパティを1行で設定できます。指定できるプロパティは以下の通りです： font-style, font-variant, font-weight, font-stretch, font-size/line-height, font-family。CSS 2.1でサポートされている font-variant の値（normal または small-caps）を含めることもできます。詳細については、 フォントとは？の記事の フォントバリアントの段落を参照してください。

使用例:

プロパティテキスト 1 の値テキスト 2 の値テキスト 3 の値
font:6vw Arial;60pt Courier, monospace;-

構文：

 1// テキスト 1
 2.text1 {
 3    font: 6vw Arial;
 4}
 5// テキスト 2
 6.text2 {
 7    font: 60pt Courier, monospace;
 8}
 9// テキスト 3
10.text3 {
11}

適用の結果は以下のようになります。3番目のテキストには値を設定していないため、デフォルトのパラメータでレンダリングされています。

さまざまなフォントプロパティCSSでレンダリングされたテキスト

CSSフォント合成 (font-synthesis)

このプロパティは、フォントファミリー内に太字や斜体のスタイルが存在しない場合に、ブラウザがそれらを合成（模造）することを許可するかどうかを制御します。 font-weight や font-style がフォントファイルに含まれていない場合、このプロパティで禁止されていない限り、ブラウザはそれらを「シミュレート」することがあります。

font-synthesis プロパティは継承されます。

指定できる値：

使用例:

プロパティテキスト 1 の値テキスト 2 の値テキスト 3 の値
font-synthesis:weight;style;none;
font-weight:900;-900;
font-style:-oblique;oblique;

構文：

 1// テキスト 1
 2.text1 {
 3    font-synthesis: weight;
 4    font-weight: 900;
 5}
 6// テキスト 2
 7.text2 {
 8    font-synthesis: style;
 9    font-style: oblique;
10}
11// テキスト 3
12.text3 {
13    font-synthesis: none;
14    font-weight: 900;
15    font-style: oblique;
16}

適用の結果は以下のようになります。3番目のテキストには none を設定したため、ブラウザは要求されたスタイルを合成していません。

さまざまなフォント合成値CSSでレンダリングされたテキスト

フォントスタック (Font Stacks)

フォントスタックとは、特定のフォントがユーザーのデバイスにインストールされていない場合に備えて、CSSで定義される予備（フォールバック）用のフォントリストを指します。これにより、Webデザイナーは異なるプラットフォームやブラウザ間でタイポグラフィの一貫性を維持できます。

フォントファミリーを指定する際、優先順位に従って複数のフォントをリスト化するのが一般的です。最初の候補が利用できない場合、ブラウザはスタック内の次の候補を順に試行します。

以下に例を示します：ここでは優先フォントとして “Helvetica Neue” を指定しています。これが利用できない場合は “Arial” を試し、それも失敗した場合は汎用ファミリーの sans-serif を使用します。

1    font-family: "Helvetica Neue", Arial, sans-serif;

フォントスタックの最後には、必ず適切な予備が確保されるよう、汎用フォントファミリー（sans-serif, serif, monospace など）を指定するのが良いプラクティスです。

Webセーフフォント (Web-safe fonts)

Webセーフフォントは、システムフォントまたはデフォルトフォントとも呼ばれ、さまざまなオペレーティングシステムやデバイスで一般的に利用可能なフォントのコレクションです。広くサポートされているため、Webデザインで安全に使用できると考えられています。

Web開発の初期段階では、システム間のフォントの偏りにより選択肢が限られていたため、デザイナーはほとんどのコンピュータにインストールされているコアセットのフォントに依存していました。

代表的なWebセーフフォントの例：

しかし、Web技術の進歩やカスタムフォント（Google Fontsなど）の普及により、Webセーフフォントへの依存度は低下し、デザイナーはより柔軟にフォントを選択できるようになりました。

CSSで外部フォントを使用する方法

外部フォントを使用するには、 @font-face ルールを使用します。これにより、カスタムフォントを指定してWebページで利用できるようになります。手順は以下の通りです：

  1. フォントファイルを取得する:

    • WOFF, WOFF2, TTF, EOT などの目的の形式のファイルを用意します。
    • Google Fontsなどのサービスから取得するか、信頼できるソースから入手します。

  2. ファイルをアップロードする:

    • フォントファイルをWebサーバーまたはプロジェクト内の指定されたフォルダにアップロードします。

  3. @font-face ルールを定義する:

    • CSSファイルで、フォントファミリー名とファイルへのパスを指定します。互換性を高めるために、複数の形式を指定することをお勧めします。

例：

1    @font-face {
2        font-family: 'MyCustomFont';
3        src: url('path/to/font.woff2') format('woff2'),
4             url('path/to/font.woff') format('woff');
5        /* 他の形式があれば追加 */
6    }
  1. フォントを適用する:
    • 定義した @font-face の名前を font-family プロパティで使用します。カスタムフォントが利用できない場合の予備も指定しておきます。
1    body {
2        font-family: 'MyCustomFont', sans-serif;
3    }
  1. テストと検証: 異なるブラウザやデバイスで表示を確認します。

レスポンシブタイポグラフィについて

レスポンシブタイポグラフィとは、さまざまな画面サイズやデバイスに合わせてタイポグラフィを調整・適応させる設計・実装手法です。これには、フォントサイズ、行の長さ、間隔などの要因が含まれます。

重要な側面：

結論

CSSフォントプロパティは、インターフェース開発における重要な要素の一つです。Webページのコンテンツの大部分はテキストであるため、これらのプロパティを習得することは、高品質な外観、読みやすさ、およびスケーラビリティを確保するために不可欠です。

一部のプロパティはどのフォントにも簡単に適用できますが、一部のプロパティには特定のバリエーションをサポートする特別なフォントが必要です。たとえば、 Inconsolata フォントには8つのウェイト（太さ）バリエーションがありますが、多くのフォントは normal（通常）と bold（太字）のみの提供となっています。

使用したいフォントがあるのに手元のデバイスにない場合は、Asposeの無料Webアプリケーションから探してダウンロードできる場合があります。また、 フォントビューアを使用すると、開発時に必要なフォントの詳細な技術情報を確認できます。

グリフとは何ですか フォント形式