CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのWebフォントとは？@font-faceの使い方と実装サンプル

Webフォントとは、ユーザーの端末にインストールされていないフォントを、CSS経由でWebページ上に読み込み・表示できるようにする仕組みです。これにより、閲覧者の環境に依存せず、デザイナーや開発者が意図した通りの書体でテキストを表示できます。

@font-faceルールとは

独自のWebフォントを使用するには、CSS3で導入された@font-faceルールを利用します。@font-faceでは、フォントの名前（font-family）と、フォントファイルの場所（src）を指定します。

主なプロパティ

  • font-family： 定義するフォントの任意の名前を指定します。この名前は後ほど要素のスタイル指定で使用します。
  • src： フォントファイルへのパスまたはURLを指定します。WOFF、TTF、OTFなどの形式に対応しています。

サンプルコード

以下は、@font-faceを使ってオリジナルフォントを読み込む基本的なコード例です。

<html>
   <head>
      <style>
         @font-face {
            font-family: myFirstFont;
            src: url(/css/font/SansationLight.woff);
         }
         div {
            font-family: myFirstFont;
         }
      </style>
   </head>
   <body>
      <div>This is the example of font face with CSS3.</div>
      <p><b>Original Text :</b>This is the example of font face with CSS3.</p>
   </body>
</html>

コードの解説

  1. まず@font-faceルール内で、「myFirstFont」という名前を定義し、srcプロパティで「SansationLight.woff」ファイルのパスを指定しています。
  2. 次に、div要素に対してfont-familyプロパティで「myFirstFont」を適用することで、その要素内のテキストが読み込んだWebフォントで表示されます。

表示結果

このコードを実行すると、div要素のテキストには定義したWebフォントが適用され、通常のテキストとの違いを確認できます。

CSSのWebフォントとは？@font-faceの使い方と実装サンプル

まとめ

Webフォントを活用すれば、OSやブラウザに標準搭載されていない書体でも、統一されたデザインのタイポグラフィを実現できます。Google Fontsのような無料のフォント配信サービスを利用すると、さらに手軽に多彩なフォントを導入できるため、あわせて検討してみてください。

  1. CSSのfont-variantプロパティとは？使い方と実例をわかりやすく解説

    CSSのfont-variantプロパティは、テキストの字形（グリフ）のバリエーションを指定するためのショートハンド（一括指定）プロパティです。このプロパティを使うことで、以下の個別プロパティの値をまとめて設定できます。font-variant-caps（大文字・小文字の字形）font-variant-numeric（数字の字形）font-variant-alternates（代替字形）font-variant-ligatures（合字）font-variant-east-asian（東アジア言語向けの字形）構文font-variantプロパティの基本的な書き方は次のとおりです。Selecto

  2. CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説

    CSSのfont-sizeプロパティは、テキストのフォントサイズ（文字の大きさ）を設定するために使用されるプロパティです。値はパーセンテージ（%）や、px（ピクセル）、cm、pt（ポイント）、emなどの単位、さらには絶対的なキーワードによって指定できます。特に相対的な値を使用することで、ユーザーがブラウザの設定を変更しても文字サイズが追従し、アクセシビリティを最大限に高めることができます。なお、フォントサイズのデフォルト値は16px（または12pt）です。構文CSSのfont-sizeプロパティの基本構文は以下の通りです。セレクタ { font-size: /*値*/ }font-si