Webフォント

HTMLで扱っている文字を表示するためのフォントは、HTMLを表示するクライアント上のフォントを使って行われている。CSS3からは、より美しい文字や特徴のある文字を表示させるためにサーバ側で用意したフォントを使うことができるようになった。未だブラウザで扱えるフォーマットが異なっていたりしているが、これから改善される見込みである。

Webフォントの互換性

ブラウザ TTF/OTF EOT/EOT Lite WOFF SVG
Internet Explorer 9以上 × ○ ○ ○
Firefox 11以上 ○ × ○ ○
Chrome 18以上 ○ × ○ ○
Safari 5.1以上 ○ × ○ ○
Opera 11以上 ○ × ○ ○

使い方

1.CSS

@font-face {
    font-family: 'myfont';                        /* フォント名 */
    src: url('./japan.woff') format("woff");      /* フォントファイル　パス */
}

p#japan {
    font-family: 'myfont';                        /* 使用するフォント名 */
}

2.HTML

<p id="japan">Web_Fontを使用した場合</p>
<p id="japan">春のうららの隅田川　のぼりくだりの　船人が櫂（かひ）のしづくも　花と散るながめを何に　たとふべき</p>

<hr>
<p>Web_Fontを使用しない場合</p>
<p>春のうららの隅田川　のぼりくだりの　船人が櫂（かひ）のしづくも　花と散るながめを何に　たとふべき</p>

サンプル

Web_Fontを使用した場合

春のうららの隅田川　のぼりくだりの　船人が櫂（かひ）のしづくも　花と散るながめを何に　たとふべき

Web_Fontを使用しない場合

春のうららの隅田川　のぼりくだりの　船人が櫂（かひ）のしづくも　花と散るながめを何に　たとふべき