@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ライフを。
CSSクックブック ―Webデザインのための活用テクニック集 (大型本)
CSSクックブック ―Webデザインのための活用テクニック集 (大型本)

本書の目的は、Webページのデザインに必要不可欠なCSS(Cascading Style Sheets)を活用するうえで出会うさまざまな問題を提示し、現実的かつ具体的な解法を紹介することにあります。 フォントや見出しなどWebデザインの基本的な要素から、フォームやテーブル形式のデザインなど定番の処理やさらに複雑なものまで幅広く取りあげて詳しく解説。 CSS初級者からプロフェッショナルなWebデザイナまで、CSS活用テクニックを効率よく、そしてたっぷりと楽しむことができるようにまとめられています。


trackbacks(0)

http://ci-xx.org/mtos/mt-tb.cgi/380

コメントする

search


About ci

カナダのバンクーバーに渡り、早３年目に突入。移民申請を行いながら、制作現場から悶々と広告についての考えを巡らせる日々。この多人種国家で、様々な人と出会い、色々なことを学ぶ小生の気ままなメモ的なブログです。
info@ci-xx.org

Networks

Latest Articles

Categories