最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

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

Cascading Style Sheets


This page uses the Fontin font by exljbris.

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

参照記事

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

メディアクエリ @media