如何为我的网站使用.woff字体？ [英] How do I use .woff fonts for my website?

问题描述

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

Where do you place fonts so that CSS can access them?

我在.woff文件中使用浏览器的非标准字体。让我们说它的awesome-font存储在文件awesome-font.woff中。

I am using non-standard fonts for the browser in a .woff file. Let's say its 'awesome-font' stored in a file 'awesome-font.woff'.

推荐答案

，你必须定义font-family，以后可以在所有的css样式中使用。下面是定义字体系列（正常，粗体，粗斜体，斜体）的代码。假设有4 * .woff文件（用于所提及的字样）放置在 fonts 子目录中。

After generation of woff files, you have to define font-family, which can be used later in all your css styles. Below is the code to define font families (for normal, bold, bold-italic, italic) typefaces. It is assumed, that there are 4 *.woff files (for mentioned typefaces), placed in fonts subdirectory.

在CSS代码中：

In CSS code:

@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;
}

有了这些定义之后，你可以写，例如

After having that definitions, you can just write, for example,

在HTML代码中：

In HTML code:

<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代码中：

In CSS code:

.mydiv {
    font-family: myfont
}

用于生成woff文件的好工具（可以包含在CSS样式表中）位于此处。并非所有woff文件在最新的Firefox版本下正常工作，并且此生成器生成正确字体。

The good tool for generation woff files, which can be included in CSS stylesheets is located here. Not all woff files work correctly under latest Firefox versions, and this generator produces 'correct' fonts.

这篇关于如何为我的网站使用.woff字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！