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


100

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

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

Answers:


168

生成woff文件后,您必须定义字体系列,以后可以在所有CSS样式中使用。下面是定义字体系列(对于普通,粗体,粗体斜体,斜体)字体的代码。假定在fonts子目录中放置了4个* .woff文件(用于提到的字体)。

在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版本下都能正常工作,并且此生成器会产生“正确”的字体。


您能否解释一下实质图标的工作方式?stackoverflow.com/questions/45323577/...
苏尼尔加尔格

16

您需要@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;
}

更多参考


1
对于src标记,在这种情况下,如何对woff文件使用rel =“ preload”?
迈克(Mike)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.