回答:
woffファイルを生成したら、後ですべてのCSSスタイルで使用できるfont-familyを定義する必要があります。以下は、フォントファミリー(通常、ボールド、ボールドイタリック、イタリック)の書体を定義するコードです。fonts
サブディレクトリに4つの* .woffファイル(前述の書体用)が配置されていると想定されています。
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ファイルを生成するための優れたツールはこちらにあります。最新のFirefoxバージョンですべてのwoffファイルが正しく機能するわけではなく、このジェネレーターは「正しい」フォントを生成します。
あなた@font-face
はあなたのスタイルシートでこのように宣言する必要があります
@font-face {
font-family: 'Awesome-Font';
font-style: normal;
font-weight: 400;
src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}
このフォントを段落に適用する場合は、次のように使用します。
p {
font-family: 'Awesome-Font', Arial;
}