@GamUra

. Webfonts サービスが便利

無数にあるフォントの中から、使いたい書体を探しだし、
ウェブフォント用にファイル変換するのは面倒。ライセンス確認も一苦労。
そこで、無料で使えるサービスを使ってみよう。すべて欧文フォント。


Google Font API

Google Font API

登録不要・無料で使えるが、まだフォント数が少ない。
フォントファイルを自サーバにアップロードする必要がない。

+ READ MORE

. ウェブフォントの基本

  • P 2010.10.21
  • , CSS3
WebFonts(ウェブフォント)とは、
サーバにアップロードしたフォントファイルを、
ブラウザ上でWebページのテキストに適用できる仕組みのこと。
(Web Designing 2010/4)
  1. フォントファイル(.ttf)を準備 ※ライセンス等に注意
  2. サーバにアップロード
  3. スタイルシートでフォントファイルを読み込む(@font-face)
  4. 適用したいHTMLタグにプロパティを設定。
/* フォントファイル(.ttf)を読み込む */
@font-face {
  font-family: 'フォント名';
  src: url('フォントファイルのパス') format('truetype');
}
/* HTMLタグにプロパティ設定 */
h1 { font-family: 'フォント名'; }

+ READ MORE

. 透明度を使ったロールオーバー

ナビゲーションやバナーなど、画像リンクを作るとき、
スタイルシートの透明度プロパティを用いて、hover を指定する方法。
[SAMPLE]当ブログ右上のバナー画像

a:hover img{
  opacity:0.7;
  filter: alpha(opacity=70); /* for IE6 */
}

+ READ MORE

: