Html 如何在 CSS 中使用外部字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15602409/
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 to use external font in CSS?
提问by Nerimantas Gruodis
I have HTML page which uses font Tarminis. This font is installed in my windows fonts folder. So if I open the page with Chrome the page is rendered as expected. However, if I open page with Firefox it is not encoded properly.
我有使用字体Tarminis 的HTML 页面。此字体安装在我的 windows 字体文件夹中。因此，如果我使用 Chrome 打开页面，页面将按预期呈现。但是，如果我用 Firefox 打开页面，它的编码不正确。
All data are here: https://dl.dropbox.com/u/72276354/snowbank.zip
所有数据都在这里：https: //dl.dropbox.com/u/72276354/snowbank.zip
Somehow Firefox (also Opera) cannot encode text int the brackets. So what I wanna do is to put this font in the same folder with my webpage and load it from there. I've been trying to use CSS @font-facefeature but with no luck.
不知何故，Firefox（也是 Opera）无法在括号内编码文本。所以我想做的是把这个字体和我的网页放在同一个文件夹中，然后从那里加载它。我一直在尝试使用 CSS@font-face功能，但没有成功。
So how can I force my web page to use font Tarminisas external and not system font?
那么如何强制我的网页使用字体Tarminis作为外部字体而不是系统字体呢？
回答by dockeryZ
It should be as simple as
应该很简单
@font-face {
font-family: "Name of your font";
src: url(name-of-font.ttf);
}
* {
font-family: "Name of your font";
}
回答by Ruben Martinez Jr.
To append to what Zane answered, browsers/platforms tend to have compatibility issues when rendering fonts, so the best way to use them is to supply multiple formats, like this:
为了补充 Zane 的回答，浏览器/平台在呈现字体时往往存在兼容性问题，因此使用它们的最佳方法是提供多种格式，如下所示：
@font-face {
font-family: 'Name of font';
src: url('font.eot') format('embedded-opentype'); /* IE9 Compat Modes */
src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font-webfont.woff') format('woff'), /* Modern Browsers */
url('font.ttf') format('truetype'), /* Safari, Android, iOS */
url('font-webfont.svg#levenim') format('svg'); /* Legacy iOS */
}
回答by Marcel Gwerder
If the license of the font allows web embedding, you can use the fontsquirrel generatorto generate all the necessary files which works also for older browsers.
如果字体的许可证允许 Web 嵌入，您可以使用fontsquirrel generator生成所有必要的文件，这些文件也适用于旧浏览器。
It also gives you a working example with all the necessary css code.
它还为您提供了一个包含所有必要 css 代码的工作示例。
