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

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

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

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

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

更多参考