CSS Font-Face url 不起作用？

发布于 2024-12-15 13:23:18 字数 675 浏览 2 评论 0原文

我在使用 @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');
    }

只有我的字体没有被渲染，而是显示了我的后备字体，arial。

如果我将字体的网址粘贴到浏览器中，它会要求我下载，这样我就知道链接是正确的，我在上面做错了什么吗？

我使用...调用字体...

h1 {
color:#272727;
font:108px 'MuseoSans-700',Helvetica,Arial,sans-serif;
letter-spacing:-7px;
}

谢谢

原文

Im having some trouble with the @font-face selector, I have the following...

@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.

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?

Im calling the font using...

h1 {
color:#272727;
font:108px 'MuseoSans-700',Helvetica,Arial,sans-serif;
letter-spacing:-7px;
}

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

﹂绝世的画 2024-12-22 13:23:18

查看这篇关于防弹 @font-face 语法的文章。 http://paulirish.com/2009/bulletproof-font-face-implementation-语法/

您也没有指定它在哪些浏览器中工作或不工作，所以我认为它在其中任何一个浏览器中都不起作用。

回复收藏 0 原文

各自安好 2024-12-22 13:23:18

.eot 适用于 Internet Explorer。
尝试 .otf

所以在实践中你需要两者都有，

例如

@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');
}

一个很好的教程在这里：http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/" rel="nofollow"> evotech.net/blog/2010/01/font-face-browser-support-tutorial/

Strelok 对 Paul Irish 文章的引用也非常好。

.eot is for internet explorer.
Try .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/

Strelok's reference to Paul Irish's article is also very good.

回复收藏 0 原文

~没有更多了~