你在哪里放置字体以便CSS可以访问它们?
我在.woff文件中使用非标准字体作为浏览器。让我们说它'awesome-font'存储在'awesome-font.woff'文件中。
答案 0 :(得分:138)
生成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版本下都能正常工作,而且这个生成器生成“正确”的字体。
答案 1 :(得分:15)
您需要在样式表
中声明@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;
}