How do I use .woff fonts for my website?

你在哪里放置字体，以便 CSS 可以访问它们？

中的浏览器使用非标准字体。沃夫档案。让我们说它的’可怕的字体’存储在一个文件’可怕的字体。沃夫。

165562 次浏览
小开
最佳答案

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

小开

您需要在样式表中像这样声明 @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;
}

更多参考资料


提交答案