[解決済み] ウェブサイトに.woffフォントを使用するにはどうすればよいですか？

質問

CSSがアクセスできるように、フォントをどこに配置しますか？

私は .woff ファイルでブラウザ用の非標準のフォントを使用しています。例えば、'awesome-font.woff' というファイルに格納されている 'awesome-font' とします。

どのように解決するのですか?

woff ファイルを生成した後、font-family を定義する必要がありますが、これは後ですべての css スタイルで使用できます。以下は、フォント ファミリ (通常、太字、太字-イタリック、イタリック) の書体を定義するコードです。ここでは、4つの *.woff ファイル (前述の書体) が fonts サブディレクトリに置かれているものとします。

CSSのコードで

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font.woff") format('woff');
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-bold.woff") format('woff');
    font-weight: bold;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-boldoblique.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-oblique.woff") format('woff');
    font-style: italic;
}

このように定義した上で、例えば次のように書けばよい。

HTMLのコードでは

<div class="mydiv">
    <b>this will be written with awesome-font-bold.woff</b>
    <br/>
    <b><i>this will be written with awesome-font-boldoblique.woff</i></b>
    <br/>
    <i>this will be written with awesome-font-oblique.woff</i>
    <br/>
    this will be written with awesome-font.woff
</div>

CSSのコードでは

.mydiv {
    font-family: myfont
}

CSS スタイルシートに含めることができる woff ファイルを生成するための優れたツールは、以下の場所にあります。 ここで . すべての woff ファイルが Firefox の最新バージョンで正しく動作するわけではありませんが、このジェネレータは「正しい」フォントを生成してくれます。