seclan のほえほえルーム

| |

html で WebFont / Webフォント を使用する方法

・
2014/08/31 []

WebFont を使用する時には、単に文字を書いただけではそのフォントを使用することは出来ません。当たり前のことですが、そのフォントで描画しろとの指示が必要になります。

従来、別フォントでの描画を指定する場合では、css の「font-family」で使用するフォントを指定して、そのクラスを描画したい文字に適用します。WebFont でもこれは同じです。違うところは「font-family」で使用できる新しい「font-face」を定義することです。今、新しい「font-family」として「TestFont」を作成することにします。すると最近のはやりの書き方は以下のようになります。

  1.  @font-face {
  2.      font-family: 'TestFont';
  3.      src: url('test.eot'); /* IE9 compat. */
  4.      src:
  5.          url('test.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
  6.          url('test.woff') format('woff'),
  7.          url('test.ttf') format('truetype'),
  8.          url('test.svg#svgFontName') format('svg');
  9.  }

IE では、IE9 より前では eot 形式のフォントファイルしか使用できないので、それ用のファイルを用意する必要があります。

この後は、通常のフォント指定と同じ方法で、フォントの使用を指示します。

  1.  .testfont {
  2.      font-family: 'TestFont';
  3.  }

後は、いつもの様に使うだけです。

  1.  <p class="testfont">何か文章</p>

試してみたところ、IE9 の場合は、「<!DOCTYPE html>」として html5 宣言をしないと動作しませんでした。



by seclan

関連


| |

 

配信

6.63 msec