CSSアーカイブ : CI - カナダ在住、WEB制作者のブログ

@font-faceの使い方

January 20, 2010

Delicious font sample

さぁ、どうだ。どう見えますかね？なんか不安。めっちゃ不安。だって、初めてだモン♪

先日、twitter上でご紹介した、@font-faceの記事を読んで、ちょっと面白そうだったので、使ってみました。

記載方法はいたって簡単。

@font-face {
font-family: GraublauWeb;
src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}

こんな感じで、@font-faceを設定して、

h4.test-font-face {
font-family: Delicious, Helvetica, Verdana, Sans-Serif;
font-size:xx-large;
}

こんな感じで指定してあげるだけ。

注意点としては、わかっちゃいたけど、IEじゃ動かない。IEで@font-faceを使うためにはeotファイルと言うものが必要。

IE向けの実験はまた今度にするとして、取り急ぎ、eotファイルの作り方をまとめた良記事を発見したので、ご紹介に預かります。

IE で Web Fonts を使う方法 (eot ファイルの作り方) | ヨモツネット

では、よい@font-faceライフを。

完成度の高いフッターのための10のテクニック

January 6, 2010

元ネタ。10 Techniques for a Fantastic Footer by Design Shackよりいくつか抜粋してご紹介。

１．主要ナビゲーションを取り入れる

２．トップに戻るボタンを付ける

３．コントラストを付ける

５．コンタクトを含める

１０．意味を持たせる

とりあえず、見れば分かりそうな物を先にご紹介。以前にも同じようなエントリーをどこかで見たけれど、忘れてしまいました。フッターって、意外と頭悩ませる部分なんですよね、ユーザーがページの最後に何を求めるか、サイトによっても様々だとは思われますが、用途用途に合わせて、フッターのパターンを頭に入れておくと便利かもしれません。

知る限りのCSSギャラリーサイトを羅列してみる。

October 1, 2009