如何为我的网站使用 .woff 字体？答案

【问题标题】：How do I use .woff fonts for my website?如何为我的网站使用 .woff 字体？
【发布时间】：2012-09-30 12:24:17
【问题描述】：

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

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

【问题讨论】：

【解决方案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 版本下都能正常工作，并且此生成器会生成“正确”的字体。

【讨论】：

你能解释一下材料图标是如何工作的吗？ stackoverflow.com/questions/45323577/…

【解决方案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

【讨论】：

对于 src 标签在这种情况下如何将 rel="preload" 用于 woff 文件？