@ font-face在Chrome中可用，但不适用于IE或Firefox

这对我来说很困惑。我正在使用字体松鼠下载Web工具包以显示自定义字体。这里是链接到字体：http://www.fontsquirrel.com/fontfacedemo/League-Gothic @ font-face在Chrome中可用，但不适用于IE或Firefox

如果你在网页看现在：http://www.simonsayswebsites.com/

正文中间写着“定制网站，旨在帮助您获得更多的客户。”它看起来很棒，完全按照它的样子，但是如果你用firefox或者IE浏览它，自定义字体将不起作用。

这里的CSS生成字体面：

@font-face { 
font-family: 'LeagueGothicRegular'; 
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot'); 
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'), 
    url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'), 
    url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'), 
    url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg'); 
font-weight: normal; 
font-style: normal;

}

人有什么想法？我看了很多关于这方面的案例，但我没有看到与我的案例有关的案例，因为我认为我已经为每个浏览器包含了所有不同的必要文件，并将它们上传到了他们尊敬的地方。

来源

2012-12-23 king

我在Firefox中看到“LeagueGothicRegular”。 –

[这可能会帮助你]（http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/）。 –

问题是网址显示的方式......你不能拥有绝对的网址，无论出于何种原因哈哈。但是谢谢Shekh的那个链接，它为我今后必须做的事提供了一个很好的背景。感谢Arash的建议，谢天谢地我现在都很好。 – king

我戳周围发现了这个有趣的珍闻为Firefox：

~~相同的起源规则：默认情况下，Firefox将只接受相对链接。如果要使用绝对链接或包含来自不同域的字体，则需要使用访问控制标题发送这些字体。~~

~~试着将这些字体的网址相对的，看看是否有帮助：~~

@font-face { 
    font-family: 'LeagueGothicRegular'; 
    src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot'); 
    src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'), 
     url('/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'), 
     url('/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

编辑：见Korpela的答案;问题是来自'www'子域的不匹配。不过，您应该保持相对的网址。

来源

2012-12-23 22:13:08 VisibleMan

大声笑...真棒我的家伙......它工作了！疯狂......非常感谢在这方面的帮助......不能相信它就是这么简单。 – king

问题的原因是（跨）使用跨域的字体。即使这两个域名可能指向同一台计算机，启动“http://simonsayswebsites.com”的URL也被视为与“http://www.simonsayswebsites.com”不在同一个域中。

切换到相对URL有帮助，因为那么域是相同的。但是尽管传言相反，Firefox不会拒绝@font-face中的绝对URL。我已经设置了一个简单的demo来展示这一点。

据推测，谣言起源于这样的情况：如果切换到相对URL有帮助，那么很自然地认为URL的类型是问题。

来源

2012-12-23 22:58:39

好啊，我完全错过了他没有在他的字体定义中使用“www”。 – VisibleMan

是有道理的...我欣赏彻底的解释。 :) – king

我也有你的问题，并搜索了很多关于它，但没有提出什么... 所以我开始尝试我的CSS几分钟，终于意识到我有重复的字体姓氏，我已经宣布下面在我的两个主题和布局页面代码：

<style type="text/css" media="screen, print"> 
    @font-face 
    { 
     font-family: 'foo'; 
     src: url('~/Assets/fonts/foo.woff') format('woff'), 
     url('~/Assets/fonts/foo.ttf') format('truetype'), 
     url('~/Assets/fonts/foo.eot') format('eot'); 
    } 
</style>

我只需要删除其中的一个，我的代码在所有三种浏览器工作得很好！

还有一点就是删除包含“font-family：'foo';”部分将做的伎俩！

来源

2015-11-08 08:24:41 AmiNadimi

@ font-face在Chrome中可用，但不适用于IE或Firefox

回答

相关问题