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版本下都能正常工作，而且这个生成器生成“正确”的字体。

Answer 2

您需要在样式表

中声明@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;
}

More Reference

如何在我的网站上使用.woff字体？

2 个答案: