@font-faceルール

TOPページに戻る > CSS

スポンサード リンク

@font-faceルール

CSS3からサーバー上に設置したWEBフォントを利用することができるようになりました
font-familyプロパティで、WEBフォントを指定します
実際にWEBフォントを使う場合は主要ブラウザに対応させるため何種類か用意してください
ブラウザ 対応しているWEBフォント形式 WOFF形式
IE4〜IE11 EOT IE9以上
Firefox TTF OTF Firefox 3.6+
Chrome TTF OTF SVG Chrome 6+
Safari 3.1+ TTF OTF SVG -
Opera 10+ SVG -


使い方(書式)css
@font-face {
    font-family: 'font1';    /* font-familyの値には好きな名前をつけられます */
    src: url('hoge.ttf');   /* webフォントのファイルの場所 */
  }
対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

実際の指定方法


@font-faceで使えるようになったWEBフォントを要素に適用

@font-face {
    font-family: 'font1';    /* font-familyの値には好きな名前をつけられます */
    src: url('hoge.ttf');   /* webフォントのファイルの場所 */
  }

p {
 font-family:'font1';        /* WEBフォントを要素に適用 */
  }




(C)2012 ホームページ作成無料