如何为我的网站使用 .woff 字体?

问题描述

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

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

解决方案

woff 文件生成后，需要定义 font-family，以后可以在你的所有 css 样式中使用.下面是定义字体系列(普通、粗体、粗斜体、斜体)字体的代码.假设有 4 个 *.woff 文件(用于提到的字体)，放置在 fonts 子目录中.

在 CSS 代码中:

@font-face {字体系列:我的字体"；src: url("fonts/awesome-font.woff") 格式('woff');}@字体脸{字体系列:我的字体"；src: url("fonts/awesome-font-bold.woff") 格式('woff');字体粗细:粗体；}@字体脸{字体系列:我的字体"；src: url("fonts/awesome-font-boldoblique.woff") 格式('woff');字体粗细:粗体；字体样式:斜体；}@字体脸{字体系列:我的字体"；src: url("fonts/awesome-font-oblique.woff") 格式('woff');字体样式:斜体；}

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

在 HTML 代码中:

<b>这将用 awesome-font-bold.woff 编写</b><br/><b><i>这将被写成 awesome-font-boldoblique.woff</i></b><br/><i>这将用 awesome-font-oblique.woff 编写</i><br/>这将用 awesome-font.woff 编写

在 CSS 代码中:

.mydiv {字体系列:myfont}

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

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

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

解决方案

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.

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,

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>

In CSS code:

.mydiv {
    font-family: myfont
}

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 字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！