CSS3 「gradient」と
「ウェブフォント（@font-face）」

このページは背景画像を一切使用していません。
背景のストライプ模様はCSS3のbackground-image:gradient、フォントはCSS3の@font-faceでサーバー上に置いたフォントを読み込んで表示しています。これによって、閲覧者のパソコンにインストールされていないフォントも表示する事が出来ます。また、画像文字ではないのでコピーする事も可能。ブラウザのテキストズームでの拡大も可能。 SEOの一環としても有効です。

2010年1月現在、InternetExplorerとOperaではまだgradientに対応していない為、表示結果が異なります。フォントファイルはうっかり領収書５部ダメにできる筆圧を誇るふいさんの作った「まきばフォント」をお借りしています。

フォントの為のスタイル指定

@font-face {
    font-family: 'MakibaFontPRegular';
    src: url('MakibaFontP13.eot'); /*IE用eot形式*/
    src: local('MakibaFontP Regular'), /*フォントがローカルにインストールされている場合の為の指定*/
         local('MakibaFontP'),
         url('MakibaFontP13.woff') format('woff'),  /*woff形式*/
         url('MakibaFontP13.ttf') format('truetype'),  /*ttf形式*/
         url('MakibaFontP13.svg#MakibaFontP') format('svg');  /*svg形式*/
}

body {
	font-size: 27px;
	font-family: MakibaFontPRegular,serif;/*@font-faceで定義したフォント名を指定*/
	line-height: 1.7;
	letter-spacing: -0.05em;
}

背景の為のスタイル指定

html {
    color: #fff;
    background-color: #158;
    background-position: center top;
    background-repeat: repeat;
  
    -webkit-background-size: 20px 20px;
       -moz-background-size: 20px 20px;
            background-size: 20px 20px;

    background-image:
      -moz-linear-gradient(
        left,
        transparent,
        transparent 10px,
        rgba(0,0,0,0.2) 10px,
        rgba(0,0,0,0.2)
      );

    background-image:
      -webkit-gradient(
        linear, left top, right top,
        from(transparent),
        color-stop(0.5, transparent),
        color-stop(0.5, rgba(0,0,0,0.2)),
        to(rgba(0,0,0,0.2))
      );
}

ウェブフォントの今

先日Chromeがバージョン４となり、普及度の高いFirefox / Opera / Safari / Chrome / InternetExplorerでウェブフォントが実現可能となりました。IEは最も早くウェブフォントを実装したブラウザですが、現段階では拡張子が「eot」の独自形式のフォントしか読み込めない為、別途IE用のスタイル記述を必要とします。

既に海外の数多くのデザイン系・ウェブ系のサイトで実装されています。漢字を含むフォントはファイルサイズが大きい為、実装が見送られるケースが多いようです。文字数の多い日本語フォントのほとんどが必然的に高価である事や、実質的に再配布としての使用法と同義である事から、使いたいフォントが見つかってもライセンスの面で不可能な場合も多いと思います。しかし、英数字しか無い要素にだけクラスを指定してアルファベットのフォントを指定するなど、充分使い所はあると思います。Firefox3.6から新たにWOFFと云う軽量な形式のフォントの読み込みも可能となっており、他ベンダーのブラウザでの実装にも期待がかかります。また、一部のブラウザでSVG形式のフォントも利用も可能となっています。

※基本的なコードについては上記ソースで間違いありませんが、いくつかのブラウザでフォントファイルを多重にリクエストしてしまう等の問題が有り、実際にはこれらに対応したコードが必要になります。実装の前に、是非以下の素晴らしいドキュメントを順にご覧下さい。

• hail2u.net - Weblog - 安全な@font-faceの書き方(抄訳)
• Bulletproof @font-face: Smiley variation - terkel.jp
• Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntax (The New Bulletproof@Font-Face Syntax) - フォントブログ

gradientプロパティの今

gradientは現在、最新版Gecko搭載ブラウザ（Firefox,Flockなど）と最新版webkit搭載ブラウザ（Safari、Chromeなど）で動作しますが、現状では記述法が大きく異なる為、こちらも現在はウェブフォントと同様、上記の様に各ブラウザに対しての書き分けが必要です。（-webkit-gradient / -moz-linear-gradient / -moz-radial-gradient）

対応ブラウザが少ない今でも、非対応ブラウザに対しては画像の背景を充てる等、工夫次第では充分実用を検討していい段階だと思います。

※上記で抜粋したCSSソース以外にも変な記述をしてます。IEにも怪しい指定してみました。Chrome4かSafari4で見るとマウスオーバーでアニメーションする箇所も有ります。お暇な方は是非、複数のブラウザで見比べたり、ソースを覗いたりダウンロードして弄ったりしてみて下さい(･ω･)ノ

• Font Design :
• Auther : ghostpia.com

※おまけ「CSS3のgradientで斜めのストライプ背景」