CSS入門 | CSS3モジュール | CSS3 Webフォント

CSS3 Webフォント

CSS3ではWebフォントを使用して、ユーザーのコンピューターにインストールされていないフォントまで使用できるようにする。

CSS3では、Webフォントのために次の規則が追加された。

• @font-face規則

CSS2フォント

CSS2までは、次のようなfontプロパティだけを使用できた。

1. font-family
2. font-style
3. font-variant
4. font-weight
5. font-size

CSS3 Webフォント(web font)の対応バージョン

CSS3 Webフォント(web font)に対応している主要Webブラウザーのバージョンは次のとおりである。

Webフォントの形式

Webフォントの形式にはさまざまな種類があり、現在よく使用されているWebフォント形式は次のとおりである。

1. TrueType Fonts (TTF)
2. OpenType Fonts (OTF)
3. The Web Open Font Format (WOFF)
4. The Web Open Font Format 2.0 (WOFF 2.0)
5. SVG Fonts/Shapes
6. Embedded OpenType Fonts (EOT)

TrueType Fonts (TTF)

TrueType Fontsは、AppleとMicrosoftが共同で開発したアウトラインフォント標準である。このフォントは、MacとWindowsオペレーティングシステムで最も長く使われてきた代表的なフォントである。TrueType Fontsは、そのフォントがさまざまなフォントサイズでどのように表現されるかを高度に制御できるようにする。

OpenType Fonts (OTF)

OpenType Fontsは、ユーザーが自分のコンピューター上でサイズを調整できるフォント標準である。このフォントはTrueType Fontsの後継としてMicrosoftが開発し、現在はほぼすべてのコンピューターで使用されている。OpenType FontsはUnicodeを基盤として多様なスクリプトをサポートし、一度に複数のスクリプトを一緒にサポートできるという利点がある。

The Web Open Font Format 1.0 (WOFF 1.0)

The Web Open Font Formatは、Webページで使用できるフォント標準であり、現在W3Cが使用を推奨しているフォント標準である。このフォントは、追加メタデータ(metadata)を入れて圧縮したTrueTypeまたはOpenTypeフォントである。

The Web Open Font Format 2.0 (WOFF 2.0)

このフォントは、Web Open Font Format 1.0よりも高い圧縮率を提供するTrueTypeまたはOpenTypeフォントである。

SVG Fonts/Shapes

SVG Fontsは、SVG要素でテキストを描くときに、その見本として使用されるフォント標準である。このフォントはSVG文書にCSSを適用できるようにするだけでなく、@font-face規則も適用できるようにする。

Embedded OpenType Fonts (EOT)

Embedded OpenType Fontsは、MicrosoftがWebページで使用するために開発した埋め込み型フォントで、OpenTypeフォントである。

Webフォント(web font)別の対応バージョン

Webフォント別に対応している主要Webブラウザーのバージョンは次のとおりである。

@font-face規則

@font-face規則はWebフォント(web font)を定義するときに使用する規則である。Webフォント(web font)は、ユーザーのコンピューターにインストールされていないフォント(font)をWebブラウザーで使用できるようにする。

まずWebフォントをサーバーにアップロードし、CSSファイルで@font-face規則を使ってWebフォントを定義して追加する。すると、そのWebページにアクセスするすべてのWebブラウザーは、サーバーからWebフォントを自動的にダウンロードし、そのフォントで表示する。

CSS3で@font-face規則を使用するには、まずfont-familyプロパティを使って新しいWebフォントの名前を定義する必要がある。その後、そのWebフォントが使用するフォントファイルのアドレスを指定すればよい。

<style>
    @font-face { font-family: myGothicFont; src: url(/examples/media/NanumGothic.woff); }
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }
    #nGothic { font-family: myGothicFont; }
    #nMyeongjo { font-family: myMyeongjoFont; }
</style>

Webフォントの太字(bold text)のための@font-face規則も、次のように追加で設定できる。

<style>
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjoBold.woff); font-weight: bold; }
    #nMyeongjo { font-family: myMyeongjoFont; }
</style>

上の例で、Webブラウザーは新しく作成したWebフォントを適用しながら、太字には上の規則を適用する。このような方法で、1つのWebフォントのために多数の@font-face規則を作成できる。

CSS3 @font-face規則のプロパティ