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

Question

你应该把字体放在哪个位置，以便于CSS能够访问到它们？

我正在使用一个.woff文件来为浏览器提供非标准字体。比如，它是存储在一个名为'awesome-font.woff'的文件中的'awesome-font'。

- Don P

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样式表中，位于此处。并非所有WOFF文件都能在最新的Firefox版本下正常工作，而该生成器生产“正确”的字体。

- bhovhannes

---

请问您能否解释一下Material Icons是如何工作的？https://stackoverflow.com/questions/45323577/how-md-icons-are-rendered-on-browser - Sunil Garg

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

更多参考资料

- Mr. Alien

---

在这种情况下，如何使用rel="preload"为woff文件设置src标签？ - Mike