Safari 3.1でWebフォントを利用する--様々な字体を定義する

エ・ビスコム・テック・ラボ
2008-04-04 08:00:00
  • このエントリーをはてなブックマークに追加

インストールされたフォントの定義を行う

 @font-faceでは、サーバー上に用意したフォントだけでなく、表示環境にインストールされたフォントの定義を行うこともできる。たとえば、「Arial」のボールド体のフォントを変更するといったことが可能だ。

 「Arial」はWindowsやMacintosh環境に標準でインストールされているフォントファミリーで、以下のようなフォントで構成されている。

  • Arial
  • Arial Italic
  • Arial Bold
  • Arial Bold Italic
  • Arial Black

 Arialを使って文字を表示した場合、標準の設定では、ブラウザはローマン体を「Arial」、ボールド体を「Arial Bold」で表示する。

標準の状態で表示したもの。Arialのローマン体(上)は「Arial」、ボールド体(下)は「Arial Bold」で表示される 標準の状態で表示したもの。Arialのローマン体(上)は「Arial」、ボールド体(下)は「Arial Bold」で表示される
ブラウザで表示を確認する

 次のソースように@font-faceでフォントを定義すると、ボールド体を「Arial Black」で表示することができる。なお、表示環境にインストールされたフォントをsrcで指定する場合は、url()の代わりにlocal()を利用して、フォントの名前を指定する。

@font-faceを設定した状態で表示したもの。ボールド体(下)が「Arial Black」で表示される @font-faceを設定した状態で表示したもの。ボールド体(下)が「Arial Black」で表示される
/* =============================================== */
/* フォントの定義                                  */

@font-face{
font-family: Arial;
src: local('Arial');
}

@font-face{
font-family: Arial;
font-weight: bold;
src: local('Arial Black');
}

/* =============================================== */


div{
font-family: Arial; 
font-size: 40px;
}

div#font01{
font-weight: normal;
}

div#font02{
font-weight: bold;
}
My Favorite Songs - 12345
My Favorite Songs - 12345
ブラウザで表示を確認する
  • コメント(2件)
#1 y2   2008-04-04 12:50:19
「字体」の定義が標準的なものとは違うので、混乱する読者がいるかもしれません。
#2 Cee   2008-04-07 11:26:24
前回の背景画像複数指定も含め、まずはそれぞれのブラウザによる対応が必要となり、ウェブサイトでの実現は数年先かな~と思います。が、これらの進歩には将来をとても期待させられます。がんばれ~
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]