css フォント 手書き風

CSS 字体手写样式：打造个性化網頁設計

この記事では、CSS を使用して個性的な手書きフォントスタイルを作成し、Web デザインに個性と創造性を加える方法について詳しく説明します。基本的なフォント属性から高度な @font-face ルールまで、他に類を見ないテキスト組版効果を作成するための包括的なガイドを提供します。

1. 入門：手書きフォントをシミュレートする CSS プロパティ

このセクションでは、CSS を使用して手書きフォントの外観を模倣する方法について説明します。

プロパティ 説明
font-family

cursive や fantasy などの一般的な手書きフォントと、サードパーティのフォントライブラリの使用方法を紹介します。

  • cursive ：この汎用ファミリは、ブラウザのデフォルトの筆記体フォントを選択します。
  • fantasy ：この汎用ファミリは、装飾的なフォント、多くの場合手書きフォントを選択します。

Google Fonts や Adobe Fonts などのフォントライブラリを使用すると、Web サイトで使用できる幅広い手書きフォントにアクセスできます。

font-style italic プロパティの使用方法と、フォントの傾斜を制御する方法を説明します。
  • font-style: italic; ：テキストを斜体にします。
letter-spacing 文字間隔を調整して手書き効果をシミュレートする方法を示します。
  • letter-spacing: 2px; ：各文字の間に 2 ピクセルのスペースを追加します。
word-spacing 単語間隔を調整して手書き感を高める方法について説明します。
  • word-spacing: 5px; ：各単語の間に 5 ピクセルのスペースを追加します。
text-shadow 影効果を使用して、テキストに立体感と奥行きを与える方法を紹介します。
  • text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); ：テキストに、わずかに右下にオフセットされた、ぼやけた黒い影を追加します。

これらのプロパティを組み合わせることで、手書きフォントのさまざまな側面を模倣できます。たとえば、次の CSS コードは、わずかに不均一な文字間隔と影のある筆記体フォントを作成します。 

<style>
  .handwriting {
    font-family: cursive;
    font-style: italic;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  }
</style>

<p class="handwriting">これは手書きのテキストの例です。</p>

2. 上級編：@font-face を使用したカスタム手書きフォントのインポート

このセクションでは、 @font-face ルールを使用して、独自の カスタム手書きフォントを Web サイトに追加する方法について説明します。

2.1. @font-face ルールの説明

@font-face ルールを使用すると、Web サイトにカスタムフォントを定義できます。構文は次のとおりです。 

@font-face {
  font-family: 'My Font'; /* フォントの名前 */
  src: url('my-font.woff2') format('woff2'), /* フォントファイルのソース */
    url('my-font.woff') format('woff'),
    url('my-font.ttf') format('truetype');
  font-weight: normal; /* フォントの太さ */
  font-style: normal; /* フォントのスタイル */
}

2.2. フォント形式の選択

Web サイトで使用できるフォント形式はいくつかあります。最も一般的な形式は次のとおりです。

形式 説明
TTF (TrueType Font) 広くサポートされている一般的なフォント形式。
OTF (OpenType Font) TTF の拡張機能であり、タイポグラフィ機能が追加されています。
WOFF (Web Open Font Format) Web 用に特別に設計されたフォント形式であり、ファイルサイズとパフォーマンスが最適化されています。
WOFF2 (Web Open Font Format 2) WOFF の改善版であり、さらに優れた圧縮率を提供します。

WOFF2 と WOFF は、Web フォントの推奨形式であり、幅広いブラウザサポートを提供します。

2.3. フォントファイルのインポート

フォントファイルを取得したら、 @font-face ルールを使用して CSS ファイルにインポートする必要があります。たとえば、 my-font.woff2 という名前のフォントファイルを fonts フォルダーに配置したとします。次の @font-face ルールを使用してインポートできます。 

@font-face {
  font-family: 'My Font';
  src: url('fonts/my-font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

2.4. フォント名の定義

font-family プロパティを使用して、フォントに名前を付けることができます。この名前は、HTML 要素のスタイルを設定するときにフォントを参照するために使用されます。たとえば、 My Font という名前のフォントを定義した場合、次の CSS ルールを使用して、見出しに適用できます。 

h1 {
  font-family: 'My Font', cursive;
}

3. テクニック：手書きフォントスタイルの表示効果の最適化

このセクションでは、手書きフォントの表示の最適化に関する追加のヒントとテクニックについて説明します。

3.1. ブラウザの互換性の処理

すべて

その他の参考記事:CSS テキストスタイル