Question

我遇到了@ 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;
}

由于

Answer 1

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

您也没有指定哪些浏览器正在工作或不工作，因此我认为它不适用于任何浏览器。

Answer 2

.eot 适用于Internet Explorer 尝试 .otf

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

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

这里有一个很好的教程：http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/

Strelok对Paul Irish的文章的参考也非常好。

CSS Font-Face网址不起作用？

2 个答案: