Html 在 CSS3/HTML5 中使用自定义字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3722292/
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
Using a custom font with CSS3/HTML5?
提问by fomicz
I have this code in the beginning of my CSS stylesheet (linked to my index.html, of course):
我的 CSS 样式表的开头有这个代码（当然链接到我的 index.html）：
@font-face {
font-family: "Calibri";
src: local("Calibri"), local("Calibri"), url("fonts/Calibri-Bold.otf") format("truetype");
}
And i'm using:
我正在使用：
#id {
font-family: Calibri, Verdana, Arial, sans-serif;
}
But it still doesn't work. What's wrong with my code?
但它仍然不起作用。我的代码有什么问题？
采纳答案by fomicz
RESOLVED: it supports TTF (not OTF) files.
已解决：它支持 TTF（非 OTF）文件。
回答by Jeff
You have local("Calibri")repeated twice in your srcproperty.
你local("Calibri")在你的src财产中重复了两次。
Also, keep in mind that IE does not support local()so if you are viewing your site in IE, it won't load the font. On top of that, IE, to my knowledge, only supports the EOT format.
另外，请记住 IE 不支持，local()因此如果您在 IE 中查看您的站点，它不会加载字体。最重要的是，IE，据我所知，只支持 EOT 格式。
For an OTF font, use format("opentype")(you have "truetype").
对于 OTF 字体，请使用format("opentype")（您有“truetype”）。
One more thing: If this is Microsoft's Calibri font, keep in mind that the license may not permit this type of use. I'm not familiar with the license so can't say for sure if this is the case.
还有一件事：如果这是 Microsoft 的 Calibri 字体，请记住许可证可能不允许这种类型的使用。我不熟悉许可证，所以不能确定是否是这种情况。
回答by Laz75
In general, the accepted code to use at the moment is this:
一般来说，目前接受的代码是这样的：
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('?'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
as suggested by Paul Irish: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
正如保罗爱尔兰的建议：http: //paulirish.com/2009/bulletproof-font-face-implementation-syntax/
The smiley for local is because you can't be sure the user's local file is the one you intend to be (read the page for the details, it's an interesting read.)
本地的笑脸是因为你不能确定用户的本地文件是你想要的（阅读页面了解详细信息，这是一个有趣的阅读。）
