Webフォントあれやこれや

Webフォントとは以下略
ググって下さい。

それでは始めましょう。

Webフォントの使い方

まず使うフォントを用意します。
とりあえず拘らないんだったらGoogleWebフォントとかでいいんじゃないかな。*1

次にスタイルシートに下記の様な記述をします。

@font-face {
    font-family: 'WebFont';
    src: url('./WebFont.eot');
    src: url('./WebFont.eot?#iefix') format('embedded-opentype'),
         url('./WebFont.woff') format('woff'),
         url('./WebFont.ttf') format('truetype'),
         url('./WebFont.otf') format('opentype'),
         url('./WebFont.svg') format('svg');
}

こう書いて

.class {
    font-family: 'WebFont';
}

これだけ。

更に

@font-face {
    font-family: "WebFont";
    src: url("./WebFont.eot");
    src: url("./WebFont.eot?#iefix") format('embedded-opentype'),
         url("./WebFont.woff") format('woff');
    font-weight: normal;
}
@font-face {
    font-family: "WebFont";
    src: url("./WebFontLight.eot");
    src: url("./WebFontLight.eot?#iefix") format('embedded-opentype'),
         url("./WebFontLight.woff") format('woff');
    font-weight: bold;
}
@font-face {
    font-family: "WebFont";
    src: url("./WebFontBold.eot");
    src: url("./WebFontBold.eot?#iefix") format('embedded-opentype'),
         url("./WebFontBold.woff") format('woff');
    font-weight: 100;
}

みたいな定義をすると

.normal {
    font-family: 'WebFont';
    font-weight: normal;
}
.bold {
    font-family: 'WebFont';
    font-weight: bold;
}
.light {
    font-family: 'WebFont';
    font-weight: 100;
}

みたいな呼び出しに対して別々のフォントを割り当てられる。
これを使うと普通のフォントの様に継承関係を利用出来るから綺麗に書けるんだけど、
しかしながらこのやり方には問題があって、レガシーなIEに対応できない。
レガシーなIEはこーゆースタイリッシュな記述に非対応なのでした。*2

なので、以下の様に書いた方がよいかもしれない。

@font-face {
    font-family: "WebFont";
    /* 略 */
}
@font-face {
    font-family: "WebFontBold";
    /* 略 */
}
@font-face {
    font-family: "WebFontLight";
    /* 略 */
}

微妙な解説

実はIEは4からWebFontに対応していたみたい。時代がやっとIEに追いついたね！ それが

    src: url('./WebFont.eot');

の指定。

だけど、これだとフォントが割と汚いし、そもそもIE以外対応してないので、
他のフォント形式も指定しないといけない。
でもレガシーIEは所詮レガシーで、 srcを1つ以上指定すると読み込みに失敗するらしい。
で、その対策として「?」を使ってパラメータを付ける。

すると、読み込みがそこで止まって正常に読み込まれるとのこと。
それが「?#iefix」*3の部分。
CSSハッカーすげー！

と言った感じでおひらき。
ハック的な所しか書いてないので詳しいこととかはググって下さい。

次はLINQ話をするのです。

*1:まあその場合下記記事何の意味もねーんですけど

*2:ﾀﾌﾞﾝ

*3:?だけでOK