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を使用しない場合

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