Html CSS Font-Face url 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8104798/
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
CSS Font-Face url not working?
提问by Liam
Im having some trouble with the @font-face selector, I have the following...
我在使用 @font-face 选择器时遇到了一些麻烦，我有以下问题...
@font-face {
font-family: 'MuseoSans-700';
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot?#iefix') format('embedded-opentype'),
url('style_159306.woff') format('woff'),
url('style_159306.ttf') format('truetype');
}
Only my fonts arent being rendered and instead im being shown my fallback, arial.
只有我的字体没有被渲染，而是显示了我的后备字体，arial。
If i paste the url to the font into my browser it asks me to download so i know the links correct, is there something im doing wrong in the above?
如果我将字体的 url 粘贴到我的浏览器中，它会要求我下载，所以我知道链接是正确的，我在上面做错了什么吗？
Im calling the font using...
我调用字体使用...
h1 {
color:#272727;
font:108px 'MuseoSans-700',Helvetica,Arial,sans-serif;
letter-spacing:-7px;
}
Thanks
谢谢
回答by Strelok
Check out this article on bullet-proof @font-face syntax. http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
查看这篇关于防弹@font-face 语法的文章。http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
You also didn't specify which browsers it's working or not working in so I assume it's not working in any of them.
您也没有指定它在哪些浏览器中工作或不工作，所以我认为它在其中任何一个中都不起作用。
回答by Michael Durrant
.eotis for internet explorer.
Try .otf
.eot适用于 Internet Explorer。
试试.otf
So in practice you need to have both, something like
所以在实践中你需要同时拥有两者，比如
e.g.
例如
@font-face {
font-family: 'MuseoSans-700';
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.otf');
}
A good tutorial is here: http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/
一个很好的教程在这里：http: //www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/
Strelok's reference to Paul Irish's article is also very good.
Strelok 对 Paul Irish 的文章的引用也很好。
