@ font-face在Chrome中运行，但不支持IE或Firefox [英] @font-face works in Chrome, but not IE or Firefox

问题描述

这对我来说很困惑。我正在使用字体松鼠下载Web工具包以显示自定义字体。这里是链接到字体： http://www.fontsquirrel.com/fontfacedemo/League-Gothic

如果您现在查看首页： http ：//www.simonsayswebsites.com/

中间的主要文字显示定制内置网站旨在为您带来更多客户。它看起来很棒，完全按照它的样子，但是如果你用firefox或者IE浏览它，自定义字体将不起作用。

以下是生成font-face的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'）格式（'embedded-opentype'），
 url（ 'http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.woff'）格式（'woff'），
 url（'http://simonsayswebsites.com/wp-content/ （'truetype'），
 url（'http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular'）格式（ 'SVG'）; 
 font-weight：normal; 
 font-style：normal; 
  

}

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

解决方案

我为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 （'truetype'），$ b $（'/ wp-content / themes / twentytenchild / League_Gothic-webfont.ttf'）格式（'woff'），
 url（'/wp-content/themes/twtentenchild/Legend_Gothic-webfont.wf' b url（'/ wp-content / themes / twentytenchild / League_Gothic-webfont.svg＃LeagueGothicRegular'）format（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
 
  

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

This is quite confusing to me. I am using font-squirrel to download a web kit to show a custom font. here is the link to font: http://www.fontsquirrel.com/fontfacedemo/League-Gothic

If you look at the homepage right now: http://www.simonsayswebsites.com/

the main text in the middle says "Custom Built Websites Designed To Get You More customers". It looks great in chrome, exactly as it should, but if you look at it in either firefox or IE, the custom font face does not work.

Here's the CSS generating the font-face:

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

}

Anyone have any ideas? I looked at many cases on this all ready, but I don't see one that relates to my case as I thought I have included all the different necessary files for each browser and have them uploaded to their respected places.

解决方案

Poking around I found this interesting tidbit for Firefox:

Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers.

Try changing those font URLs to relative and see if that helps:

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

edit: see Korpela's answer; the problem was the mismatch from the 'www' subdomain. You should probably keep the URLs relative, though.

这篇关于@ font-face在Chrome中运行，但不支持IE或Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！