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

　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の表示

@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;
        }

<h1>Cascading Style Sheets</h1>

<address>
This page uses the <a href="http://www.josbuivenga.demon.nl/fontinsans.html">Fontin font by exljbris.</a>
</address>

※ブラウザで表示を確認する

参照記事

• Safari 3.1でWebフォントを利用する

メディアクエリ @media