html - 如何为我的网站使用 .woff 字体？

Question

您将字体放在哪里以便 CSS 可以访问它们？

我在 .woff 文件中使用浏览器的非标准字体。假设它的“awesome-font”存储在文件“awesome-font.woff”中。

Answer 1

生成 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
}

生成 WOFF 文件的好工具，可以包含在 CSS 样式表中，位于 here .并非所有 WOFF 文件都可以在最新的 Firefox 版本下正常工作，并且此生成器会生成“正确”的字体。