Html 如何为我的网站使用 .woff 字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12812441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use .woff fonts for my website?
提问by Don P
Where do you place fonts so that CSS can access them?
你在哪里放置字体以便 CSS 可以访问它们？
I am using non-standard fonts for the browser in a .woff file. Let's say its 'awesome-font' stored in a file 'awesome-font.woff'.
我在 .woff 文件中为浏览器使用非标准字体。假设它的 'awesome-font' 存储在文件 'awesome-font.woff' 中。
回答by bhovhannes
After generation of woff files, you have to define font-family, which can be used later in all your css styles. Below is the code to define font families (for normal, bold, bold-italic, italic) typefaces. It is assumed, that there are 4 *.woff files (for mentioned typefaces), placed in fontssubdirectory.
生成woff文件后，你必须定义font-family，以后可以在你所有的css样式中使用它。下面是定义字体系列（普通、粗体、粗斜体、斜体）字体的代码。假设有 4 个 *.woff 文件（用于提到的字体），放置在fonts子目录中。
In CSS code:
在 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;
}
After having that definitions, you can just write, for example,
有了这些定义之后，你可以写，例如，
In HTML code:
在 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>
In CSS code:
在 CSS 代码中：
.mydiv {
font-family: myfont
}
The good tool for generation woff files, which can be included in CSS stylesheets is located here. Not all woff files work correctly under latest Firefox versions, and this generator produces 'correct' fonts.
生成 woff 文件的好工具，可以包含在 CSS 样式表中，位于这里。并非所有 woff 文件都可以在最新的 Firefox 版本下正常工作，并且此生成器会生成“正确”的字体。
回答by Mr. Alien
You need to declare @font-facelike this in your stylesheet
您需要@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');
}
Now if you want to apply this font to a paragraph simply use it like this..
现在，如果您想将此字体应用于段落，只需像这样使用它..
p {
font-family: 'Awesome-Font', Arial;
}
