July 04, 2009

CSS3の@font-faceでWebfontを利用する。

今回はCSS3で新たに導入された@font-faceと、
Webfontについての説明をします。

なお、管理人はOpera 10.0 Betaで作成していますので、その他のブラウザでは多少挙動が違うかもしれません。
Webfontというのは、 ユーザーの環境に用意されてないフォントでもWebサーバーにそのフォントが用意されていれば、そのユーザーの環境でもそのフォントが表示できるシステムです。

例えば、CSSでこの様な表記をするとします。
body {
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;
}
Windowsユーザーでヒラギノをインストールしている人は少ないと思います。
ですので、こう指定したところで観覧するユーザーにヒラギノがインストールされていなければ、ヒラギノでは表示されませんので無意味です。

ひらぎの かくご ぷろ!

ひらぎの
と同じに表示されていればヒラギノがインストールされています。


しかし、それじゃあ表現の幅が狭いです。 じゃあ何とかして使わなければ。
確かシェアウェアでWebfontを使えるソフトがあったような気がしますが、一般的ではありませんね。
一番一般的な方法と言えば画像にしちゃう方法ですが、やっぱり面倒だしテキストと比べ重くなりがちです。

今まではこれといった解決方法がないままでしたが、CSS3で新しく出来た@font-faceでユーザーの環境に用意されていないフォントでも表示できるようになりました。

指定方法

@font-face {
	font-family:TestFonts;
	src:url(フォントのURL) format("opentype");
}
body {
	font-family:TestFonts;
}

まず、CSSの先頭に@font-faceを指定します。
font-familyプロパティでWebfontに定義したいフォントへ任意の名前を付けます。
フォントの名前ではなくてもいいです。 "Opera"でもなんでも。 ですが、識別しやすい名前がいいと思いますね。

次のsrcプロパティですが、
url()で定義したいフォントへのパスを指定します。 絶対でも相対でもどちらでもOKです。
例: url(font/hiragino_kaku_gothic_w3.otf)

その後ろに半角スペースを空けて、format()で定義したいフォントの種類を指定します。
現在はOpenTypeとTrueTypeのみに対応しています。
拡張子がotfの場合はOpenType、ttfの場合はTrueTypeの可能性が高いですが偽装されている可能性も否定できないので、極窓などで調べてみると確実かもです。

後、クォーテーションで囲んでくださいね。
例: format("OpenType"), format("TrueType")

出来ましたら、好きな適用先で、
"font-family:TestFonts;"のように、font-faceで指定した名前で指定してください。


ブラウザごとの対応について

  • Opera 10.0a
  • Safari 3.1
  • Firefox 3.5
  • Google Chrome 2.0b
以上で対応してるそうな。


因みにヒラギノとか言ってきましたけど、不特定多数の人にフォントを使わせるのですから規約に違反する可能性があります。
必ず、規約の違反にならないように気をつけてください。

また、@font-faceでの使用について予め明記されているフォントもあります。
Fontin Sans等がそうですね。

ping URL

response list

omu3b July 04, 2009 22:51

PC is GOD!!様の紹介記事から来ました。

シンプルなTOP絵に感動しました!

これからちょくちょく遊びにきます^−^

nodokapcx@管理人 July 05, 2009 00:37

いやいやいやw
omu3bさんのほうが上手いですよ〜
自分のブログだって適当な部分多すぎるし。。。

凄すぎますね。 サイト開いた瞬間から本当に中学生かと思いましたよw

高校生になるころには神になってるかもしれません。
お互い中学生ってことで頑張りましょう。

チ`ク August 28, 2011 22:04

ネイル

leave a reply

your name:

your email:

your website:

remenber: rank: Face Star


Admini
nodokapcx Auther:nodokapcx

自己紹介


Operaが大好きなSuper暇人。
Skypeはあんまりやったことないから分からないので、 コールされても×ボタン連打しちゃうだけかもしれない。


Mail

nodokapcx$じーめーる.こむ

Skype!

ログイン状態

Twitter!



ランキング参加

クリックで支援宜しくお願いします。
にほんブログ村 ネットブログ ネットサービスへ
にほんブログ村 IT技術ブログ フリーソフトへ
にほんブログ村 PC家電ブログ Windowsへ
  • ライブドアブログ