ウェブサイトで .woff フォントを使用するにはどうすればいいですか? 質問する

WOFFファイルを生成した後、以下を定義する必要があります。font-familyは、後ですべての CSS スタイルで使用できます。以下は、フォント ファミリ (通常、太字、太字斜体、斜体) の書体を定義するコードです。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;
}

<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>

.mydiv {
  font-family: myfont
}