Firefox 3.5のCSS対応:Webフォント、メディアクエリ、セレクタ

エ・ビスコム・テック・ラボ
2009-07-09 21:33:01
  • このエントリーをはてなブックマークに追加

 Firefox 3.5がリリースされ、HTML 5やCSS 3への対応が一段と進んだ。そこで、今回から3回にわたって、Firefox 3.5が対応したCSSの新機能についてまとめていく。各機能について過去の記事で細かく紹介しているものについては「参照記事」のリンクも用意したので、合わせて参考にしてほしい。

 今回は、Firefox 3.5が対応したWebフォント(@font-face)、メディアクエリ(@media)、セレクタ(:nth-*、:*-of-type、:before、:after)の機能を見ていきたい。

Webフォント(ダウンローダブルフォント) @font-face

 Firefox 3.5は、@font-faceによるWebフォント(ダウンローダブルフォント)の機能をサポートした。CSS 3の草案「Fonts」で提案されており、この機能を利用すれば、制作者がサーバー上に用意したフォントで文字を表示できるようになる。

 たとえば、次のサンプルでは@font-faceでの利用条件が明記されたフリーフォントを利用して文字を表示している。

Firefox 3.5の表示 Firefox 3.5の表示
@font-face{
font-family: WebFont;
src: url('font/Fontin_Sans_R_45b.otf') format("opentype");
font-weight: normal;
}

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

h1      {
        font-family: WebFont; 
        font-size: 60px;
        text-align: center;
        border: solid 1px #4488aa;
        margin: 20px;
        padding: 5px;
        }

address {
        font-family: WebFont; 
        font-size: 14px;
        font-style: normal;
        text-align: center;
        margin: 20px;
        padding: 5px;
        }

Cascading Style Sheets

This page uses the Fontin font by exljbris.
ブラウザで表示を確認する

参照記事

メディアクエリ @media

  • 新着記事
  • 特集
  • ブログ