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

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

 次のソースではすべての文字を「WebFont」で表示するように設定している。その上で、順にローマン体、イタリック体、ボールド体、ボールドイタリック体で表示するように設定した。

 イタリック体の「a」や「g」の文字を見ると、ローマン体を斜めに変形したものではなく、斜体としてデザインされたフォントで表示されていることがわかる。

Safari 3.1の表示 Safari 3.1の表示
/* =============================================== */
/* フォントの定義                                  */

@font-face{
font-family: WebFont;
src: url('font/Fontin_Sans_R_45b.otf') format("opentype");
}

@font-face{
font-family: WebFont;
font-style: italic;
src: url('font/Fontin_Sans_I_45b.otf') format("opentype");
}

@font-face{
font-family: WebFont;
font-weight: bold;
src: url('font/Fontin_Sans_B_45b.otf') format("opentype");
}

@font-face{
font-family: WebFont;
font-style: italic;
font-weight: bold;
src: url('font/Fontin_Sans_BI_45b.otf') format("opentype");
}

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

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

div#font01{
font-style: normal;
font-weight: normal;
}

div#font02{
font-style: italic;
font-weight: normal;
}

div#font03{
font-style: normal;
font-weight: bold;
}

div#font04{
font-weight: bold;
font-style: italic;
}
My Favorite Songs - 12345
My Favorite Songs - 12345
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などの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]